Reactjs useffect和async（）

在useEffect钩子中，我基本上是试图通过在每次迭代中增加lastIndex状态来为映射到tempData的每个“item”对象添加一个“id”。但是，所有已映射的item.id返回0初始状态值

我猜在迭代中调用setLastIndext函数可能有问题吧？谢谢

const SearchAppointments  = React.memo(() => {


  const [data, setData] = useState([ ])

  const [lastIndex, setLastIndex] = useState(0)

  useEffect( () => {
    const fetchData = async() => {
      var response = await fetch('../data.json');
      var result = await response.json()
      var tempData = result.map( item => {
        item.id = lastIndex;
        setLastIndex(lastIndex => lastIndex + 1);
        return item
      })
      setData(tempData)
    };
    fetchData();
  }, [])

    return (
      <div>
      </div>
    );
})

setLastIndex是异步函数lastIndex的值将仅在下一次渲染中更新，但result.map是同步函数==>result.map中的lastIndex始终为0

您可以尝试以下方法： const searchAppoints=React.memo=>{ const[data，setData]=useState[] //在设置数据项的id时，您实际上并不需要此lastIndex状态，但您希望它在setData之后，您可以保留此状态并将其设置为获取数据中该项的最后一个索引 常量[lastIndex，setLastIndex]=useState0 useEffect=>{ const fetchData=async=>{ var response=wait fetch'../data.json'； var result=await response.json var tempData=result.map项，索引=>{…项，id:index} setLastIndextempData.length-1 setDatatempData }; 获取数据； }, [] 回来 ; } 您将尝试以下方法：

const SearchAppointments  = React.memo(() => {
  const [data, setData] = useState([]);

  const fetchData = async() => {
    const response = await fetch('../data.json');
    const result = await response.json();

    setData(result.map( (item, index) => ({...item, id:index})))
  };

  useEffect( () => {
    fetchData();
  }, [])

    return (
      <div>
      </div>
    );
})```

你真的需要lastIndex吗

这是数据长度。

---

它可以在setDatalastData=>..内部使用。

异步状态设置器是一个类组件问题，在这里，lastIndex是一个变量，无论经过多少时间，它都不会更改为当前值。该效果仍然缺少一个依赖项，lasIndex将永远只能是0，因此最好将其设置为0。如果将lastIndex作为依赖项，它将导致无限重渲染，因为我们在该USEFFECT中设置了setLastIndex。他正在使用setLastIndexlastIndex=>lastIndex+1；基于先前状态设置新状态不会导致过时关闭。您可以在这里获得更多信息：lastIndex可以通过闭包来获取数据，但当组件重新呈现时，它不会重新运行效果，因此fetchData具有lastIndex的过时闭包。这意味着您的解决方案使用lastIndex是毫无意义的，因为它将永远只为0。您还可以执行result.map项，index=>{…项，id:index}。问题中的无意义代码只能导致无意义的答案。同意，最后一个索引可以替换为每个项目的索引。lastIndex的过期关闭：检查我以前的答案。为什么不执行result.map项，index=>{…项，id:index}？您可以将lastIndex设置为results.length。该效果将只运行一次，因此不确定为什么需要lastIndex。然而，我实际上想映射到数据的是整个项和项。我想你是想做result.map项，index=>{…项，id:index}@HMR是的，我的错误