ReactJS 设置值使用状态组件 return undefined

Question

我有这段代码，其中我基于存储的对象构建了一堆 select 和选项；我还想设置“selected”值 onChange，我将 selected 值存储在一个状态中，所以每次我重建 select（基于 select在实际情况下我添加或删除选项）使用 select 状态我重新 select 以前的值；但它似乎不起作用，如果我在不应用的状态上设置一些默认值我这里有代码：

https://codesandbox.io/s/damp-cherry-wsqyx?file=/src/App.js

我设置了一个默认值

const [selected, setSelected] = useState([{ Weigth: "250gr" }]);

但是（即使使用 useEffect 我也可以看到 selected 有一个值）该值未在 select

中设置

该值计算如下：

value={selected.find((o) => o.name === attribute.name)}

查找的结果是“未定义”，即使我很确定 o.name 是 Weigth 并且 attribute.name 也是 Weight

我错过了什么？有帮助吗？

Answer 1

您的对象实际上没有 name 键，您必须将对象更改为：

const [selected, setSelected] = useState([
    { name: 'Weight', value: "250gr" }
]);

然后从找到的对象中获取值：

value={selected.find(o => o.name === attribute.name)?.value}

您还可以考虑使用对象而不是数组来存储所选值：

const [selected, setSelected] = useState({
    Weight: "250gr"
});

然后直接通过key访问值：

value={selected[attribute.name]}

ReactJS 设置值使用状态组件 return undefined

ReactJS set value using state component return undefined

object

reactjs

use-state