React.js 无法从 useState 中用 .map 迭代数组

Question

在我的项目中，我以简单的形式从用户那里收集输入，然后我想通过useState将该输入保存在对象设置数组中。 我更新状态，当我打印状态时，我可以看到对象，但是如果我需要一个特定的数据，我无法得到它。

表单(收集用户输入(：

<input id='foodText' type="text" />
<select id='unitBox'>
{UnitsArray.map(unit=>(
<option>{unit}</option>
))}
</select>
<input id='FoodAmount' type='number' />
<button onClick={props.click} type="submit">Add</button>

props.click和useState(两者都在主应用程序中.js文件中(

const [FoodList, setFoodList] = useState([]);
const Foodie = () =>{
setFoodList([...FoodList,{'Item':document.getElementById('foodText').value,
'Unit':document.getElementById('unitBox').value,
'Quantity':parseInt(document.getElementById('FoodAmount').value)}])
console.log('changed')
}

最后，这是我使用 array.map(( 对其进行迭代的时候

useEffect(()=>{props.aId.map(food=>(console.log({food})))},[props.aId]);
useEffect(()=>{props.aId.map(food=>(console.log({food['Item']})))},[props.aId]);
//this will throw an exception error when I run it.  

任何建议或想法将不胜感激。

Answer 1

首先，如果组件被控制，它总是更容易。

const [foodText, setFoodText] = useState('');
const [unitBox, setUnitBox] = useState('');
const [foodAmount, setFoodAmount] = useState(0);
<input 
id='foodText' 
value={foodText} 
onChange={(e) =>setFoodText(e.target.value)} 
type="text" 
/>
<select id='unitBox' value={unitBox} onChange={(e) => setUnitBox(e.target.value)}>
{UnitsArray.map(unit=>(
<option>{unit}</option>
))}
</select>
<input 
id='FoodAmount' 
type='number' 
value={foodAmount} 
onChange={(e) =>setFoodAmount(e.target.value)} 
/>
<button onClick={props.click} type="submit">Add</button>

当你的组件被控制时，你不必联系 DOM 来获取值。

const Foodie = () =>{
setFoodList([...FoodList,{
'Item':foodText,
'Unit':unitBox,
'Quantity':foodAmount
}])
console.log('changed')
}

最后：(只是编辑你想做的任何事情(

useEffect(()=>{
props.aId.map(food=> console.log(food))
},[props.aId]);
useEffect(()=>{
props.aId.map(food=> console.log(food.Item))
},[props.aId]);