我正在尝试使用 React 中的 usestate 将元素添加到 object？

Question

我正在尝试在 useState 挂钩中添加新字段

// prevstate  
let [currentdata, setcurrentdata] = useState({
   id:'',
   name:''
  })

我尝试像这样在 object 中添加新字段

   setcurrentdata(currentdata => ({
            ...currentdata,
            q: quantity,
          }))

但它没有添加新字段

Answer 1

下面的代码片段可能是实现预期目标的一种可能解决方案。

注意：我个人不喜欢将 useState 与此类对象结合使用的想法，而是更喜欢在每个变量上使用多个更简单的 useState。

代码片段

 const {useState} = React; const MyFunction = () => { const [badStateObj, setBadStateObj] = useState({ id: '', name: '' }); const clickHandler = (propName) => setBadStateObj(prev => ({...prev, [propName]: prev[propName] || '' })); const updateHandler = (propName, propVal) => setBadStateObj(prev => ({...prev, [propName]: propVal })); return ( <div> {Object.entries(badStateObj).map(([k,v]) => ( <div> Key: {k} &emsp; Value: {v} &emsp; &emsp; <button onClick={() => updateHandler(k, prompt( `Enter new value for ${k}` ))} > Update {k} </button> </div> ))} <button onClick={() => clickHandler(prompt('Enter prop name'))} > Add new prop </button> </div> ); }; ReactDOM.render( <div> <h4>Demo showing the useState that I personally dislike</h4> <MyFunction /> </div>, document.getElementById("react") );

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

解释

• badStateObj仅使用id和name属性初始化
• 当用户点击Add new prop按钮时，可能会添加一个新道具
• 存在单独的按钮来更新每个单独的道具的价值
• clickHandler将用户输入的新属性添加为''值。
• updateHandler接受propName和propVal作为参数并更新badStateObj中的适当道具。