英文:
Best Way to Append data from json api React Native
问题
在主屏幕上，我从JSON API获取数据并附加到数据状态变量。每次API调用都会提供10次。但问题是，在达到50-60个项目之后，应用程序变得非常慢（甚至在移动设备上冻结1-2分钟）。当我尝试找出问题时，对每个项目的迭代进行了控制，我发现在将数据附加到“setData”状态时发生了不必要的重新渲染。请查看下面的详细问题：
import React, { useState, useEffect } from 'react';
import { View, Text, Button, FlatList } from 'react-native';
const API_URL = 'https://my-api-url.com/data';
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.error(error);
}
};
const loadMoreData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
setData([...data, ...jsonData]);
} catch (error) {
console.error(error);
}
};
return (
<View>
<FlatList
data={data}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item) => item.id.toString()}
/>
<Button title="Load more" onPress={loadMoreData} />
</View>
);
};
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:
import React, { useState, useEffect } from 'react';
import { View, Text, Button, FlatList } from 'react-native';
const API_URL = 'https://my-api-url.com/data';
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.error(error);
}
};
const loadMoreData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
setData([...data, ...jsonData]);
} catch (error) {
console.error(error);
}
};
return (
<View>
<FlatList
data={data}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item) => item.id.toString()}
/>
<Button title="Load more" onPress={loadMoreData} />
</View>
);
};
export default App;
答案1
得分: 1
Sure, here's the translated code:
const App = () => {
const [data, dispatchData] = useReducer((state, actionData) => ([...state, ...actionData]), []);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
dispatchData(jsonData);
} catch (error) {
console.error(error);
}
};
const loadMoreData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
dispatchData(jsonData);
} catch (error) {
console.error(error);
}
};
const renderItem = useCallback(({ item }) => <Text>{item.name}</Text>, []);
return (
<View>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
<Button title="Load more" onPress={loadMoreData} />
</View>
);
};
export default App;
英文:
const App = () => {
const [data, dispatchData] = useReducer((state, actionData) => ([...state, ...actionData]), []);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
dispatchData(jsonData);
} catch (error) {
console.error(error);
}
};
const loadMoreData = async () => {
try {
const response = await fetch(API_URL);
const jsonData = await response.json();
dispatchData(jsonData);
} catch (error) {
console.error(error);
}
};
const renderItem = useCallback(({ item }) => <Text>{item.name}</Text>, []);
return (
<View>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
<Button title="Load more" onPress={loadMoreData} />
</View>
);
};
export default App;
That should be enough.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论