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（两者都在主app.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]);

React.js无法通过useState中的.map遍历数组

1 个答案: