使用状态组件的ReactJS设置值返回未定义

Question

我有这段代码，其中我基于存储的对象构建了一组select和options；我也想设置"；选择"；value on Change，我将所选的值存储在一个状态中，所以每次我使用select状态重建select(基于实际情况下的选择，我添加或删除选项(时，我都会重新选择以前的值；但它似乎不起作用，而且如果我对未应用的状态设置了一些默认值我这里有代码：

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

我设置了一个默认

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

但是(即使使用useEffect，我也可以看到所选的有一个值(，该值没有在选择中设置

该值计算如下：

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

find的结果是"0"；"未定义"；，即使我确信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"
});

然后通过以下键直接访问值：

value={selected[attribute.name]}