循环调用 api 内的反应功能组件仅返回 api 上传递的最后一个元素的响应

Question

父组件

  data.map(eachData => (
     <ChildComponent
     key={eachData.id}
     child={eachData}
     />
  ))

子组件

props.getChildData({id: id}); 代码调用 Redux 动作并将其存储在减速器中

function ChildComponent(props) {
const [id, setId] = React.useState(props.eachData.id)
useEffect(() => {
    let handler
    (function () {
      handler = setTimeout(() => {   
        props.getChildData({id: id})
      }, 1000)
    })();
    return () => {
      clearTimeout(handler)
    }
  }, [id])

}

Api 呼叫正在网络选项卡中进行和验证。 Redux 存储仅返回 api 响应具有最后的 api 响应

Answer 1

您错误地访问了子组件中的 id。 id 在 props.child 而不是 props.eachData 里面所以改变 useState 来访问 id 像这样：

const [id, setId] = React.useState(props.child.id);

它会正常工作。