使用效果和异步()

useEffect and 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 是同步函数 ==> lastIndex 在 result.map 中始终为 0

你可以试试这个:

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


  const [data, setData] = useState([ ])
  // You not really need this lastIndex state for setting id for your data item, but somehow you want it after setData you can keep this and set to the last index of the item in fetched data
  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, index) => ({...item, id: index}))
      setLastIndex(tempData.length -1)
      setData(tempData)
    };
    fetchData();
  }, [])

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

你会试试这个:

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吗?

data.length。 可以在setData(lastData=>...)

里面使用