react form, delete previous state if length < 1

Question

我想制作一个包含多个字段的表单，但我只想填充实际使用的字段，例如在下面的代码中，如果字段的长度超过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请求。

问题是，不是关于被渲染，而是关于数据被保持在状态，比如说我有三个字段，sku、title和location。如果我只想要sku和location，我会键入它，并且只有这两个字段被创建或添加到state中，title永远不会被添加，但如果我在title中键入一些内容，然后删除它，那么它们中的3个现在是活动的，title为空。这不是我想要的，我需要这个头衔完全脱离国家。

Answer 1

为了避免混乱的代码，您应该尽可能地将逻辑排除在JSX之外。在这样的某些情况下，使用Conditional运算符非常有用，该运算符在不为true时返回null而不是组件。例如：

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

Answer 2

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

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