Reactjs setState在react js的功能组件中不工作

我想根据用户单击显示名称。当浏览按钮将单击时，我们将显示名称列表，如果我们单击名称，则我希望显示更改状态的名称

下面是示例代码

const TestCli=（）=>{
const[names，setfolderName]=React.useState([
“索努”，
“蒙努”，
“xyz”，
“abc”，
“哈哈”，
]);
const[isdiv，setisdiv]=React.useState（false）；
const[Name，setName]=React.useState（“我的名字是：”）；
const[isName，setisName]=React.useState（false）；
constdisplayfolder=（）=>{
setisdiv（真）；
};
const displayInfo=（名称）=>{
setisdiv（！isdiv）；
setisName（true）；
setName（“我的名字是”+名字）；
console.log（名称）；
};
返回(
我叫索努
浏览
{isdiv(
{names.map（（name）=>(
displayInfo（名称）}>{name}



))}
)：null}
{isName？{Name}:null}
);
};
render（，document.getElementById（“根”））
发生这种情况的原因是，您正试图打印状态名称，但useState hook update 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;




从“React”导入React，{useState，useffect}；
常量TestCli=（）=>{
常量名称=[“sonu”、“monu”、“xyz”、“abc”、“lol”]；
const[isDiv，setIsDiv]=useState（false）；
const[Name，setName]=useState（“我的名字是：”+names[0]）；
const[isName，setIsName]=useState（false）；
constdisplayfolder=（）=>{
setIsDiv（真）；
};
const displayInfo=（名称）=>{
setIsDiv（！isDiv）；
setIsName（true）；
setName（`My name是${name}`）；
//在这里您可以拨打axios电话
};
返回(
{isName？{Name}:null}
浏览
{isDiv(
{names.map（（name）=>(
displayInfo（name）}key={name}>
{name}



))}
)：null}
);
};
导出默认TestCli；

您可以参考此代码沙盒以获取ref，代码可在Test.js上获得

通常，这可能发生，因为setState不是立即命令

我检查了你的代码，这里我只是改变了一些不必要的状态。
例如，在不更改任何内容（可以是变量）时，不需要状态。。检查代码：

  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;

import React，{useState}来自“React”；
常量TestCli=（）=>{
常量名称=[“sonu”、“monu”、“xyz”、“abc”、“lol”]；
const[isdiv，setisdiv]=useState（false）；
const[Name，setName]=useState（null）；
返回(
我叫索努
setisdiv（真）}>
浏览
{isdiv(
{names.map（（name）=>(
setName（“我的名字是“+name”）>{name}



))}
)：null}
{Name&&{Name}
);
};
导出默认TestCli；

如果有不清楚的地方，请询问，我会帮忙的

附言

此外，当您映射通过它时，每个列表都应该有一个唯一的键。在里面
这种情况下，我只是把你的名字作为一个唯一的键，但通常，你
有一个id。按键有助于做出反应，告知哪些项目已更改。。所以
这可能会导致一些意外错误。请在此处阅读有关密钥的更多信息：

请在此处查看答案：。这是否回答了您的问题？实际上，当我们点击名称时，我想根据名称执行一些Axios操作。基于名称，我想生成一个大链接并设置为状态。比如说，当我们单击名称“raj”时，将显示raj.pdf，我想通过axios CallOk发送该raj.pdf。好的，我知道你正在尝试做什么，等等，我将编辑我的帖子。我已经更新了我的代码。你可以参考它，了解你试图记录的内容。我们可以在函数中使用useEffect。如果是，但是不是，我们不能在函数中使用任何钩子，setState只是一个设置状态并对其进行更改的函数。但是像useState、useCallbakcs、useffect这样的钩子应该在体内。