将字典键、值对附加到 useState 列表中答案

【问题标题】：Append dict key,value pairs into useState list将字典键、值对附加到 useState 列表中
【发布时间】：2022-12-17 09:26:35
【问题描述】：

我不熟悉反应并构建一个简单的反应应用程序。我正在尝试通过将新的 dict's key value 对附加到状态来插入或更新当前状态。

应用程序.js

function App() {
    const [valueList, setValueList] = useState([])

    const appendOnClick = (value, id) => {
        var newValue = {"value": value, "id": id}

        
        setValueList(value => [
          ...value,
          ...newValue
        ])

        console.log(valueList) // showing []

    }


    return (
        <>
            
                  <Form.Select aria-label="Default select example">
                    <option>Language</option>
                    <option value='1' onClick={() => appendOnClick("Good", 900)}>First Value</option>
                    <option value='2' onClick={() => appendOnClick("Better", 500)}>Second Value</option>
                  </Form.Select>

        </>
    )
}

我正在尝试将这些点击添加到状态

[
    {
        value: "Good",
        id: 900,        
    },
    {
        value: "Better",
        id: 500,        
    },
]

我已经尝试了很多次，但它没有设置状态。

我试过使用：-

    setValueList(value => ({
      ...value,
      ...newValue
  }))

但它显示newValue 不可迭代。

然后我尝试使用

    setValueList(valueList=> [
      ...valueList,
      ...value
    ])

但它也没有追加。

任何帮助将非常感激。谢谢你

【问题讨论】：

标签： reactjs react-hooks react-state

【解决方案1】：

将对象附加到数组时，不需要使用 ...（扩展运算符）

setValueList(value => [
      ...value,
      newValue
])

此外，控制台日志不会立即显示值更改，因为 useState 是异步的。所以为此使用useeffect

useEffect(() => {
        console.log(valueList)  

}, [valueList])

【讨论】：

谢谢你的回答。是的，我知道不会显示即时设置状态，但第二次设置会显示第一次设置状态。当我console.log时它仍然显示为空[]