使用 react hooks setstate 将数组推送到状态不起作用

Question

我已经初始化状态selectedProductList如下：

const [selectedProductList, setSelectedProductList] = useState([]);

在 return 部分：我有以下代码段：

return (
    <>
        <Select
            id="product_id"
            name="product_id"
            onChange={handleProductSelection}
            // value={formData.product_id}
            value={products.filter(function (option) {
                return option.value === formData.product_id;
            })}
            options={products}
            className={` ${
                errors["product_id"] ? "is-invalid" : ""
            }`}
        />
        {selectedProductList.map((item) => {
            {
                console.log("called");
                item != undefined && (
                    <tr key={item.product_id}>
                        <td>{item.product_id}</td>
                    </tr>
                );
            }

            // <SelectedProductList repeatedRow={} errors/>;
        })}

    </>
)

在这里，<Select/> 是反应 select 组件，并且在更改时它会触发 handleProductSelection 事件。而且，为了处理这种 selection 场景，我有：

const handleProductSelection = (event) => {
    console.log("handle selection>> " + event);
    const { name, value, label } = event;
    console.log("handle selection>> " + value);
    var newProductArr = [];
    newProductArr[value] = [];
    newProductArr[value]["product_id"] = value;
    newProductArr[value]["quantity"] = "";
    newProductArr[value]["unit_id"] = "";
    newProductArr[value]["price_per_unit"] = "";
    setSelectedProductList((selectedProductList) => [
        ...selectedProductList,
        ...newProductArr,
    ]);
};

useEffect(() => {
    console.log("selectedProductList >>", selectedProductList);
}, [selectedProductList]);

在这里，每当我更改 select 列表时，它都会将值设置为：

但是，如果我查看组件选项卡，它显示为 [undefined,undefined,[],undefined,undefined,undefined,[]]

Answer 1

您确定要将新产品定义为数组吗？这似乎更正确：

var newProduct = {};
newProduct["product_id"] = value;
newProduct["quantity"] = "";
newProduct["unit_id"] = "";
newProduct["price_per_unit"] = "";
setSelectedProductList((selectedProductList) => [
    ...selectedProductList,
    newProduct,
]);

编辑

您已将传递给 map() 的回调函数定义为 (item) => { /* ... */ }。这种语法需要 return 语句：

{selectedProductList.map((item) => {
  console.log("called");
  return (
    item != undefined && (
      <tr key={item.product_id}>
        <td>{item.product_id}</td>
      </tr>
    )
  );
})}

请注意，虽然这有效，但好的 linter/formatter（ESLint、Prettier）仍然会抱怨这段代码。我强烈建议您将其中任何一个嵌入到您的 IDE!

根据产生 JSX 的内联条件，您有两个选择：

使用 react hooks setstate 将数组推送到状态不起作用

Push array to the state using react hooks setstate not working

reactjs

react-select