React .map 函数未将数据传递给 useState答案

【问题标题】：React .map function not passing data to useStateReact .map 函数未将数据传递给 useState
【发布时间】：2022-01-21 16:34:24
【问题描述】：

为什么我的 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 进行映射并根据 selected 是否有项目来呈现模式：

{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 将渲染次数限制为防止无限循环。

【问题讨论】：

标签： javascript reactjs conditional-statements use-state conditional-operator

【解决方案1】：

你必须像这样使用 onClick

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

【讨论】：

【解决方案2】：

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

变化：

onClick={setSelected(section)}

到：

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

【讨论】：

感谢您的解释！