我试图发布一个对象数组。它们显示在我的HTML中，但当我console.log它总是给我一个额外的空对象。我的后端不喜欢。
下面是codesandbox上的代码：
https://codesandbox.io/embed/frosty-herschel-u8byqj?fontsize=14&hidenavigation=1&theme=dark
下面是代码：
const [animal, setAnimal] = useState('');
const [initialState, setInitialState] = useState<any>([])
const handleAdd = (text: any) => {
const newAnimal = {
id: uuidv4(),
animal: text
}
setInitialState([newAnimal, ...initialState]);
console.log(initialState)
}
return (
<div>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Animal</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={animal}
label="Animal"
onChange={(e: any) => setAnimal(e.target.value)}
name='worksFrom'
>
<MenuItem value='cow'>Cow</MenuItem>
<MenuItem value='pig'>Pig</MenuItem>
<MenuItem value='horse'>Horse</MenuItem>
</Select>
<Button disabled={!animal} onClick={() => handleAdd(animal)}>Add</Button>
</FormControl>
{
initialState.map((x: any) => {
return (
<div key={x.id}>{x.animal}</div>
)
})
}
</div>
)
}我试过很多不同的方法，但似乎都不起作用
2条答案
按热度按时间wrrgggsh1#
首先，应删除最初在以下位置添加的对象：
然后，也许你不想发送空的动物，所以你应该在handleAdd中添加一个if子句来处理这种情况：
这应该对你有帮助。祝你学习顺利;
e4eetjau2#
你总是用空的动物初始化数组，因为动物状态总是初始化为空文本。将数组初始化为空，并添加一些逻辑，以便仅在选中该选项时才能添加动物。
为了避免添加一个空的动物，如果动物状态是假的，你可以禁用这个按钮。
这应该禁用按钮，除非您从选择组件中拾取动物。