最佳方法从 JSON API 中附加数据 React Native

huangapple
go评论107阅读模式
英文:

Best Way to Append data from json api React Native

问题

在主屏幕上，我从JSON API获取数据并附加到数据状态变量。每次API调用都会提供10次。但问题是，在达到50-60个项目之后，应用程序变得非常慢（甚至在移动设备上冻结1-2分钟）。当我尝试找出问题时，对每个项目的迭代进行了控制，我发现在将数据附加到“setData”状态时发生了不必要的重新渲染。请查看下面的详细问题：

  1. import React, { useState, useEffect } from 'react';
  2. import { View, Text, Button, FlatList } from 'react-native';
  4. const API_URL = 'https://my-api-url.com/data';
  6. const App = () => {
  7.   const [data, setData] = useState([]);
  9.   useEffect(() => {
  10.     fetchData();
  11.   }, []);
  13.   const fetchData = async () => {
  14.     try {
  15.       const response = await fetch(API_URL);
  16.       const jsonData = await response.json();
  17.       setData(jsonData);
  18.     } catch (error) {
  19.       console.error(error);
  20.     }
  21.   };
  23.   const loadMoreData = async () => {
  24.     try {
  25.       const response = await fetch(API_URL);
  26.       const jsonData = await response.json();
  27.       setData([...data, ...jsonData]);
  28.     } catch (error) {
  29.       console.error(error);
  30.     }
  31.   };
  33.   return (
  34.     <View>
  35.       <FlatList
  36.         data={data}
  37.         renderItem={({ item }) => <Text>{item.name}</Text>}
  38.         keyExtractor={(item) => item.id.toString()}
  39.       />
  40.       <Button title="Load more" onPress={loadMoreData} />
  41.     </View>
  42.   );
  43. };
  45. export default App;
英文:

In Homescreen, I am fetching data from json api and appending to data state variable. Each api call give 10 times. But the problem is, After 50 - 60 items app becomes very slow (even mobile freeze for 1-2 minutes). When I try to figure out the problem, and consoling each iterating of items, I seen the unnecessary re-renders while fetching to appending data to "setData" state. Look at the detailed problem below:

  1.     import React, { useState, useEffect } from &#39;react&#39;;
  2. import { View, Text, Button, FlatList } from &#39;react-native&#39;;
  4. const API_URL = &#39;https://my-api-url.com/data&#39;;
  6. const App = () =&gt; {
  7.   const [data, setData] = useState([]);
  9.   useEffect(() =&gt; {
  10.     fetchData();
  11.   }, []);
  13.   const fetchData = async () =&gt; {
  14.     try {
  15.       const response = await fetch(API_URL);
  16.       const jsonData = await response.json();
  17.       setData(jsonData);
  18.     } catch (error) {
  19.       console.error(error);
  20.     }
  21.   };
  23.   const loadMoreData = async () =&gt; {
  24.     try {
  25.       const response = await fetch(API_URL);
  26.       const jsonData = await response.json();
  27.       setData([...data, ...jsonData]);
  28.     } catch (error) {
  29.       console.error(error);
  30.     }
  31.   };
  33.   return (
  34.     &lt;View&gt;
  35.       &lt;FlatList
  36.         data={data}
  37.         renderItem={({ item }) =&gt; &lt;Text&gt;{item.name}&lt;/Text&gt;}
  38.         keyExtractor={(item) =&gt; item.id.toString()}
  39.       /&gt;
  40.       &lt;Button title=&quot;Load more&quot; onPress={loadMoreData} /&gt;
  41.     &lt;/View&gt;
  42.   );
  43. };
  45. export default App;

答案1

得分: 1

Sure, here's the translated code:

  1. const App = () => {
  2.   const [data, dispatchData] = useReducer((state, actionData) => ([...state, ...actionData]), []);
  4.   useEffect(() => {
  5.     fetchData();
  6.   }, []);
  8.   const fetchData = async () => {
  9.     try {
  10.       const response = await fetch(API_URL);
  11.       const jsonData = await response.json();
  12.       dispatchData(jsonData);
  13.     } catch (error) {
  14.       console.error(error);
  15.     }
  16.   };
  18.   const loadMoreData = async () => {
  19.     try {
  20.       const response = await fetch(API_URL);
  21.       const jsonData = await response.json();
  22.       dispatchData(jsonData);
  23.     } catch (error) {
  24.       console.error(error);
  25.     }
  26.   };
  28.   const renderItem = useCallback(({ item }) => <Text>{item.name}</Text>, []);
  30.   return (
  31.     <View>
  32.       <FlatList
  33.         data={data}
  34.         renderItem={renderItem}
  35.         keyExtractor={(item) => item.id.toString()}
  36.       />
  37.       <Button title="Load more" onPress={loadMoreData} />
  38.     </View>
  39.   );
  40. };
  42. export default App;
英文: 
  1. const App = () =&gt; {
  2.   const [data, dispatchData] = useReducer((state, actionData) =&gt; ([...state, ...actionData]), []);
  4.   useEffect(() =&gt; {
  5.     fetchData();
  6.   }, []);
  8.   const fetchData = async () =&gt; {
  9.     try {
  10.       const response = await fetch(API_URL);
  11.       const jsonData = await response.json();
  12.       dispatchData(jsonData);
  13.     } catch (error) {
  14.       console.error(error);
  15.     }
  16.   };
  18.   const loadMoreData = async () =&gt; {
  19.     try {
  20.       const response = await fetch(API_URL);
  21.       const jsonData = await response.json();
  22.       dispatchData(jsonData);
  23.     } catch (error) {
  24.       console.error(error);
  25.     }
  26.   };
  28.   const renderItem = useCallback(({ item }) =&gt; &lt;Text&gt;{item.name}&lt;/Text&gt;, []);
  30.   return (
  31.     &lt;View&gt;
  32.       &lt;FlatList
  33.         data={data}
  34.         renderItem={renderItem}
  35.         keyExtractor={(item) =&gt; item.id.toString()}
  36.       /&gt;
  37.       &lt;Button title=&quot;Load more&quot; onPress={loadMoreData} /&gt;
  38.     &lt;/View&gt;
  39.   );
  40. };
  42. export default App;

That should be enough.

huangapple
  • 本文由 发表于 2023年3月9日 14:24:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/75681075.html
  • javascript
  • react-hooks
  • react-native
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定