同一屏幕上的可重用组件会覆盖以前的组件

Question

我创建了一个要在同一屏幕中重复使用的组件。

可重用组件基于传入的参数进行访存调用，将结果存储在本地状态，并显示结果。

ScreenPage.js

<View>
  <ReusableComponent id={1} apiCall={call1} >
  <ReusableComponent id={2} apiCall={call2}>
  <ReusableComponent id={3} apiCall={call3}>
</View>

在获取发生之前，最后传入的组件参数似乎覆盖了所有先前的组件参数。因此，所有3个组件的id和apiCall都变为3和call3。

如何防止这种情况发生？

ReusableComponent.js

ReusableComponent = ({id, apiCall}) => {
  const [isLoading, setIsLoading] = useState(true)
  const [users, setUsers] = useState([])

  _getUserData = () => {
    fetch('url', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          action: apiCall,
          id: id
        })
      })
        .then(res => res.json())
        .then(data => {
          setIsLoading(false)
          setUsers(data.response)
          _playersRunsByIndex()
        })
        .catch(err => console.error(err))

  }

  useEffect(() => {
    setIsLoading(true)
    _getUserData()
  }, [id])

...

return (
  <FlatList
    data={users}
    ...
  />
)