React Native - 再次执行该功能时 JSON 响应未更新答案

【问题标题】：React Native - JSON reponse is not updating when doing the function againReact Native - 再次执行该功能时 JSON 响应未更新
【发布时间】：2021-06-03 10:14:34
【问题描述】：

我有一个在 flatList 中呈现的名称列表，该列表将我带到一个详细信息页面，其中写出用户的 ID。如果我再次使用菜单返回列表并选择不同的名称，则相同的名称一直出现，直到我刷新应用程序并再次执行此操作，然后选择的第一个名称将继续存在。 ID 一直在更新，但在这种情况下不会更新“data.Name”。我怎样才能让它自己更新，所以名字也会改变？

App.js

function PlayersScreen( { navigation } ) {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
  fetch('http://***.***.***.***/people',
   { credentials: "same-origin",
   headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
   },
  },
  )
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

  return (

         <FlatList
            data={data}
            keyExtractor={item => item.Name}
            renderItem={({ item }) => (
            <Text onPress={() => {navigation.navigate('DetailsScreen', {itemId: item._id})}}>{item.Name}</Text>
            )}
          />
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  console.log('DetailsScreen', itemId);
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  useEffect(() => {
  const apiurl = 'http://***.***.***.***:3000/people/' + itemId;
  fetch(apiurl)
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(data);
   setData(responseJson)})
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));
 
}, []);
     return (
    <View>
      <Text>Details Screen</Text>

      **<Text>itemId: {itemId}</Text>** <- THIS DOES CHANGE
      **<Text>{data.Name}</Text>** <- THIS DOES NOT CHANGE

      <Button title="Go back to List" onPress={() => navigation.navigate('people')} />
  );
}

【问题讨论】：

标签： react-native api components refresh

【解决方案1】：

我解决了。问题是在细节屏幕上，useEffect 没有重新渲染一次，因为 app.js 没有重新渲染。解决方案简单如下（取自 ReactJS 文档）

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

所以我在细节部分的最终代码最终看起来像这样

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  console.log('DetailsScreen', itemId);
  /* 2. Get the param */
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  useEffect(() => {
  const apiurl = 'http://***.***.***.***:3000/************/' + itemId;
  console.log(apiurl)
  fetch(apiurl)
  .then((response) => response.json())
  .then((json) => setData(json))
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));
}, [itemId]);

itemId 被添加到末尾括号中，所以如果它发生变化，它会重新渲染。

【讨论】：