React中如何更新数组map渲染的元素状态并同步接口返回数据

核心修改逻辑 #

• 给点击事件传递当前项的唯一ID，定位需要更新的元素
• 异步调用后端接口获取最新数据后，基于原数组生成新数组，仅替换对应ID的项，通过不可变更新触发React视图刷新
• 建议将map渲染的key替换为数据唯一id，避免索引导致的渲染bug

完整修改后代码 #

const Foo = () => {
  const [foos, setFoos] = useState([]);

  // 接收点击项的id作为参数
  const handleClick = async (targetId) => {
    try {
      // 调用后端修改状态的API，传入要修改的id，拿到返回的最新项数据
      const updatedFoo = await updateFooStatusApi(targetId)
      // 不可变更新数组：仅替换对应id的项，其余项保持不变
      setFoos(prevFoos => prevFoos.map(foo => {
        return foo.id === targetId ? updatedFoo : foo
      }))
    } catch(e) {
      console.error('Exception ' + e)
    }
  }

  useEffect(() => {
    // 调用API获取初始列表并赋值
    const fetchFoos = async () => {
      const res = await getFoosApi()
      setFoos(res.data)
    }
    fetchFoos()
  }, [])

  return (
    <>
      {/* key改用数据唯一id代替索引，避免渲染异常 */}
      {foos.map((foo) =>
        <div key={foo.id}>
          <p>{foo.id}</p>
          <p 
            className={foo.status ? 'success': 'failed'} 
            // 传递当前项的id给点击处理函数
            onClick={() => handleClick(foo.id)}
          >
            {foo.status}
          </p>
        </div>
      )}
    </>
  )
}

注意说明 #

这里的updateFooStatusApi和getFoosApi是你实际业务中封装的后端接口请求方法，替换成自己项目里的对应请求逻辑即可。
React要求状态更新遵循不可变原则，直接修改原数组的元素不会触发视图重渲染，必须返回一个全新的数组给setFoos才能生效。

内容的提问来源于stack exchange，提问作者Phùng Ngọc Sơn