在 array.map 中为多个元素使用 React useState

Question

我正在尝试在 array.map 中动态创建的元素上设置多个 useStates。 array.map 中的每个元素都应该使用相同的 useState，但分配了正确的值。 例如，array.map 有 3 个不同的元素，它们都应该将“焦点”设置为 false。 单击时，被单击元素的 useState 应更改为 true，其他应保持为 false。

    const [focus, setFocus] = useState(false);

    { projects.map((project, index) => (
        <div className={` ${focus ? "focus" : ""} `} key={project.id}>
            <div className="cover" to={"/work/" + project.slug} onClick={ () => setFocus(true) }>
            </div>
        </div>
    ))}

Answer 1

您需要存储应具有focus的project的id 。 单个boolean状态属性不起作用。

例如

const [focusedProject, setFocusedProject] = useState(undefined);
...
onClick={() => setFocusedProject(project.id)}

然后

<div className={` ${focusedProject === project.id ? "focus" : ""} `} key={project.id}>