reactjs - 如何使用 useState 从数组中的数据设置状态？

Question

代码必须设置如下状态：

let [dateState, setDateState] = useState({
    mon: true,
    wed: true,
    fri: false
})

我有一个数组：

const arrayData = [mon,wed,fri]

我尝试在 setDateState()内部使用，forEach() 但它仍然无法正常工作。有没有办法像下面的代码一样设置状态？

标签： reactjs

Answer 1

检查这个例子。希望它可以帮助你。请打开您的控制台以查看打印的更新值。

import React, {useState} from "react";

export default function UseStateExample() {
    const [dateState, setDateState] = useState({
        mon: false,
        wed: false,
        fri: false
    });

    function clickHandler(e) {
        setDateState({
            ...dateState,
            [e.target.id]: true
        });

        console.log(dateState);
    }

    return (
        <div>
            <ul>
                <button id="mon" onClick={clickHandler}>Set Monday</button>
                <button id="wed" onClick={clickHandler}>Set Wednesday</button>
                <button id="fri" onClick={clickHandler}>Set Friday</button>
            </ul>
        </div>
    );
}