时间戳

首页 > 解决方案 > 如何在 useState 中替换 Array？

javascript - 如何在 useState 中替换 Array？

问题描述

我想让程序通过用户的选择更改表格内容。所以我把空数组放在useState中，像这样。

    const [statInfo, setStatInfo] = useState([]);

并选择html代码：

                    <select
                        name="statSelect"
                        onChange={(e) => {
                            handleChange(e);
                            setStat();
                        }}>
                        <option value="0to60">무각 60</option>
                        <option value="1to60">1각 60</option>
                        <option value="2to60">2각 60</option>
                    </select>

当我选择选项时，数据将被更改。但我不知道如何使用 useState。这些是数据

    const stat = [
         [11421, 1059, 782, "10%", "50%", "10%", "25%"],
         [11992, 1112, 821, "15%", "55%", "20%", "30%"],
         [10401, 1114, 1049, "20%", "30%", "35%", "25%"]
    ];

还有我的反应代码：

    async function setStat() {
    console.log('calling');
    if (stat === "무각 60") {
        await setStatInfo(stat[0]);
        console.log(statInfo);
    } else if (stat === "1각 60") {
        await setStatInfo(stat[1]);
        console.log(statInfo);
    } else {
        await setStatInfo(stat[2]);
        console.log(statInfo);
    }
}

我尝试使用地图。但我也不知道如何使用地图。

是否有每次更改整个数组的功能或方法？

标签： javascriptarraysreactjsreact-hooksuse-state

解决方案

没有理由在函数 setStat 中使用 async （如果我错了，请纠正我！）。

你应该有这样的选择：

<select onChange={handleChange}>
     <option value="grapefruit">Grapefruit</option>
     <option value="lime">Lime</option>
     <option value="coconut">Coconut</option>
</select>

然后你可以有handleChange更新状态的功能：

handleChange = (event) => {
    if(event.target.value === "grapefruit"){
        setStatInfo([...stat[0]]);
    } else if (event.target.value === "lime"){
        setStatInfo([...stat[1]]);
    } else if (event.target.value === "coconut"){
        setStatInfo([...stat[2]]);
    }
}

请注意，我正在使用箭头功能（常规功能不起作用）。在 中react，我们不调用函数，而是传递函数。

您还可以设置默认值select。例如，

const [value, setValue] = useState("default value");

然后将其传递到您的选择表单中：

<select value={value} onChange={handleChange}>

我需要将函数放入花括号 {} 中，以便 React 可以区分 Javascript（大括号内）和 JSX 之间的区别。

在此之后，您可以返回组件（我假设您正在使用函数组件）：

return (
      <form onSubmit={handleSubmit}>
         <select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
        <input type="submit" value="Submit" />
      </form>
    );

推荐阅读