React - 根据选中状态设置复选框输入选中值

Question

我可以成功地将输入的值和检查状态添加到状态数组中，因此当我单击输入时，值和检查状态会被推送到数组中，当我再次单击它时，值和检查状态会被推送到数组中从该特定输入中取出数组。

我陷入困境的是，如果我进入下一步/组件，然后返回，我试图根据输入是否已在状态数组中将其设置为检查状态。

共有三个输入，默认为未选中。我将单击 #1 和 #3，单击下一步按钮，转到下一步，单击后退按钮，现在所有三个输入都恢复为未选中状态，即使状态中仍然有 #1 和 #3。我希望 #1 和 #3 显示为选中状态。

const [addon, setAddon] = useState([]); //This is in another file

function AddOns({ addon, setAddon }) {
    const checkHandler = (e) => {
        if (e.target.checked === true) {
            setAddon([
                ...addon,
                { value: e.target.value, checked: e.target.checked },
            ]);
        }

        if (e.target.checked === false) {
            const nextAddon = addon.filter((a) => a.value !== e.target.value);
            setAddon(nextAddon);
        }
    };
                <Input
                    value="Online service"
                    dataAmount="+$1/mo"
                    dataNumber="1"
                    // checked={}
                    addonDetail="Access to multiplayer games"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Larger storage"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail="Extra 1TB of cloud save"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Customizable profile"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail=" Custome theme on your profile"
                    onClick={(e) => checkHandler(e)}
                />

我想也许循环遍历状态数组以将数组值与输入值匹配，并在匹配时将检查的状态拉出可能会起作用，但我在那里没有成功。我还设法将已检查属性设置为状态数组中是否有已检查状态为 true，但它会将所有三个输入设置为已检查而不是特定输入。

Answer 1

您可以使用

Array#some

检查是否匹配。

<Input value="Online service"
       checked={addon.some(a => a.value === "Online service")} 
       // other props...
/>