setState在react js中的功能组件中不起作用
我想要显示基于用户点击的名称。当浏览按钮单击时，我们将显示名称列表，如果我们单击名称，则我希望显示更改状态的名称。
以下是示例代码
const TestCli = () => {
const [names, setfolderName] = React.useState([
"sonu",
"monu",
"xyz",
"abc",
"lol",
]);
const [isdiv, setisdiv] = React.useState(false);
const [Name, setName] = React.useState("My name is:");
const [isName, setisName] = React.useState(false);
const displayFolder = () => {
setisdiv(true);
};
const displayInfo = (name) => {
setisdiv(!isdiv);
setisName(true);
setName("My nameis " + name);
console.log(Name);
};
return (
<React.Fragment>
<div>My name is sonu</div>
<button class="browseBtn" onClick={displayFolder}>
Browse
</button>
{isdiv ? (
<div>
{names.map((name) => (
<React.Fragment>
<span onClick={() => displayInfo(name)}>{name}</span>
<br></br>
</React.Fragment>
))}
</div>
) : null}
{isName ? <div>{Name}</div> : null}
</React.Fragment>
);
};
ReactDOM.render(<TestCli />, document.getElementById("root"));<div id="root" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
这里打印成功，但当我在控制台上打印时，打印错误。例如:当我第一次点击任何名字时，它正在打印，我的名字是: only。然后，当第二次单击任何名称时，无论之前单击的是什么，该名称都会打印出来。
状态没有反映
回答 2
Stack Overflow用户
发布于 2021-04-20 17:54:22
发生这种情况的原因是，您正在尝试打印一个状态的名称，但是useState挂钩更新setState是异步的，因此当它尝试打印它的状态时，该值不会被更新。如果您想控制该状态，请使用useEffect传递参数名称来查看实际状态
useEffect(()=>{
console.log(Name)},[Name])对于您试图实现的目标，您可以参考以下代码
import React, { useState, useEffect } from "react";
const TestCli = () => {
const names = ["sonu", "monu", "xyz", "abc", "lol"];
const [isDiv, setIsDiv] = useState(false);
const [Name, setName] = useState("My name is:" + names[0]);
const [isName, setIsName] = useState(false);
const displayFolder = () => {
setIsDiv(true);
};
const displayInfo = (name) => {
setIsDiv(!isDiv);
setIsName(true);
setName(`My name is ${name}`);
//here you can make axios call
};
return (
<>
{isName ? <div>{Name}</div> : null}
<button class="browseBtn" onClick={displayFolder}>
Browse
</button>
{isDiv ? (
<div>
{names.map((name) => (
<>
<span onClick={() => displayInfo(name)} key={name}>
{name}
</span>
<br></br>
</>
))}
</div>
) : null}
</>
);
};
export default TestCli;你可以参考这个代码沙箱作为参考，代码可以在Test.js上找到
Stack Overflow用户
发布于 2021-04-20 17:58:16
通常，这种情况会发生，因为setState不是立即命令。
我检查了你的代码，这里我只是改变了你在那里做的一些不必要的状态。例如，当您没有更改任何内容时，您不需要state，它可以是一个变量。检查代码：
import React, { useState } from "react";
const TestCli = () => {
const names = ["sonu", "monu", "xyz", "abc", "lol"];
const [isdiv, setisdiv] = useState(false);
const [Name, setName] = useState(null);
return (
<>
<div>My name is sonu</div>
<button class="browseBtn" onClick={() => setisdiv(true)}>
Browse
</button>
{isdiv ? (
<div>
{names.map((name) => (
<div key={name}>
<span onClick={() => setName("My name is " + name)}>{name}</span>
<br></br>
</div>
))}
</div>
) : null}
{Name && <div>{Name}</div>}
</>
);
};
export default TestCli;如果有什么不清楚的地方，问一问，善意的帮助:D
PS。
同样，当你通过列表映射时，每个列表都应该有一个唯一的键。在本例中，我只是将您的名字作为唯一的键，但通常情况下，您有一个id。按键有助于反应，以告知哪一项已更改。因此，这可能会导致一些意外的错误。有关密钥的更多信息，请单击此处：https://reactjs.org/docs/lists-and-keys.html
https://stackoverflow.com/questions/67176372
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号