反应形式,如果长度 < 1 则删除以前的状态

react form, delete previous state if length < 1

我想制作一个有多个字段的表单,但我只想填充实际正在使用的字段,例如在下面的代码中,如果字段的长度超过1,它就会出现,但是如果我删除它并且它变成 0,那么我不想让数据保持状态,但我拥有它的方式,该字段仍然显示 sku: 45FGH, title: "" ,我需要它来摆脱具有的数据什么都没有,就好像它从未被填充过一样。所以在前面的例子中,因为我在标题中输入了一些东西然后删除了它,我只想保持 sku: 45FGH 状态并摆脱 title: ""

import React, {useState} from 'react'

function TheForm() {
  const [data, setData] = useState({})
  const handleChange = (e, key) => {
    if(e.target.value.length >= 1) return setData(prevState => {
      return {...prevState, [key]: e.target.value}
    })
  }
  console.log(data);
  return (
    <div>
      <input placeholder="sku" onChange={(e) => handleChange(e, 'sku')}/>
      <input placeholder="title" onChange={(e) => handleChange(e, 'title')}/>
      <input placeholder="location" onChange={(e) => handleChange(e, 'location')}/>
    </div>
  )
}

export default TheForm

主要问题是我使用的是graphql,如果我提供一个字段,它必须包含一些东西,而且有时我没有使用所有字段,如果我在其中一个字段中错误地输入了一些东西,它会中断 POST 请求。

问题是,与渲染无关,它与数据保持状态有关,假设我有 3 个字段,sku、标题和位置。如果我只想要 sku 和 location 我会输入它并且只有这 2 个字段被创建或添加到状态中,标题永远不会添加,但是如果我在标题中输入一些内容然后删除它,那么其中 3 个现在与标题一起激活是空的。这不是我想要的,我需要标题完全从状态中消失。

为避免混乱的代码,您应该尽可能将逻辑排除在 JSX 之外。在像这样的某些情况下,当不正确时,使用 Conditional operator that returns null 而不是您的组件很有用。例如:

function TheForm() {
  ...
  return (
    <form>
      { data.sku.length() > 0 ? <input value={data.sku} ... /> : null }
      ...
    </form>
  )
}

我想出了一个解决方案,我制作了一个单独的对象,它只推送正在使用的字段。 非常感谢尝试过的人!

import React, {useState} from 'react'

function TheForm() {
  const [data, setData] = useState({})
  const handleChange = (e, key) => {
    return setData(prevState => {return {...prevState, [key]: e.target.value}})
  }
  let _obj = {}
  for(let [key, value] of Object.entries(data)){
    if(value.length > 1) _obj[key] = value;
  }
  console.log(_obj);
  return (
    <div>
      <input placeholder="sku" onChange={(e) => handleChange(e, 'sku')}/>
      <input placeholder="title" onChange={(e) => handleChange(e, 'title')}/>
      <input placeholder="location" onChange={(e) => handleChange(e, 'location')}/>
    </div>
  )
}

export default TheForm