在 React 中设置两个状态变量 onClick答案

【问题标题】：Setting two state variable onClick in React在 React 中设置两个状态变量 onClick
【发布时间】：2021-07-14 14:58:01
【问题描述】：

当用户单击图像时，我试图设置两个状态变量，我的浏览器认为我正在调用第二个函数，如何分配这两个变量？我知道我不能使用 && 但我不知道如何正确使用，如果这是一个愚蠢的问题，对不起。

<div className="img-wrap" key={doc.id}
                    onClick={() => (
                        setSelectedImg(doc.url) &&
                        setSelectedArtName(doc.artName))}
                >   
                    <img src={doc.url} alt={doc.artName} />
                    
                </div>

【问题讨论】：

标签： javascript reactjs react-native react-hooks onclick

【解决方案1】：

没有显式 return 语句的函数返回 undefined（像您的 setState 一样的 setter 函数）。

在&& 中，仅当第一个条件为truthy 时才检查第二个条件）。否则直接返回false。由于第一个函数返回undefined（一个假值），第二个setState 将不会运行。

我认为你可以不用&&：

<div className="img-wrap" key={doc.id}
                    onClick={() => {
                        setSelectedImg(doc.url);
          setSelectedArtName(doc.artName)}}
                >   
                    <img src={doc.url} alt={doc.artName} />
                    
                </div>

【讨论】：

但是我的第一个 setter 确实返回正确，我在这里缺少什么，因为即使下面 img 标记中的 alt={doc.artName} 填充正确。
没关系。您的代码不会引发错误。它只是不运行第二个设置器。您的第一个 setState 运行良好，但返回未定义。之后，您的语句将按照您的预期运行。在此处检查控制台以查看 setState 返回的内容 codesandbox.io/s/funny-darwin-2eso1?file=/src/App.js 我作为演示创建的。
那是因为我从 app.js 导入了这两个设置器，这是我想动态更新的组件。我尝试了下面的建议，但现在它在浏览器中抛出“TypeError：setSelectedArtName 不是函数”
所以你没有正确导入它。你必须展示你是如何传递这个 setter 函数的。这进一步证明了 setSelectedArtName 之前没有运行的观点。希望你能理解。
是的！我明白了，我忘了把这个 setter 传递给 app.js 中的组件。非常感谢你为我指明了正确的方向！非常感谢。