React .map 函数不将数据传递给 useState

Question

为什么我的 setSelected useState 不接受来自 .map 函数的数据？我有以下反应 js 代码：

    const [ selected, setSelected ] = useState(null)
    const sectionItems = [
        { id: "1", title: "title1", description: "description1" },
        { id: "2", title: "title2", description: "description2" },
        { id: "3", title: "title3", description: "description3" },
    ]

我正在通过 sectionItems 进行映射并根据所选项目是否具有项目来呈现模态：

{sectionItems.map((section, index) => {
                    return (
                        <div key={section.id} className="processSection1" onClick={setSelected(section) >
                            <div className="processTitle" >{section.title}</div>
                        </div>
                    )
                })}


{selected ? <Modal title={selected.title} description={selected.description}  /> : " "}

问题：为什么我不能将数据传入setSelected？或者更准确的问题是，如何使用每个 sectionItem 渲染模态？也收到此错误：重新渲染太多。 React 将渲染次数限制为防止无限循环。

Answer 1

你必须这样使用onClick

onClick={()=>setSelected(section)}

Answer 2

如果您想向函数添加值，您应该在 onClick 中使用内联函数。现在您在渲染时为每个渲染触发函数。

变化：

onClick={setSelected(section)}

至：

onClick={() => setSelected(section)}

React .map 函数不将数据传递给 useState

React .map function not passing data to useState

javascript

reactjs

conditional-statements

use-state

conditional-operator