尝试显示 FlatList 时出现过多的重新渲染错误答案

【问题标题】：Too many rerednders error by trying to show a FlatList尝试显示 FlatList 时出现过多的重新渲染错误
【发布时间】：2023-03-31 22:31:01
【问题描述】：

我正在尝试显示这样的数字列表：(image of what the flat list would look like) 为此，我做了一个带有 numberName 和一个键的对象数组，它通过循环生成：

const number = 5;

let [numbers, setNumbers] = useState([]);

let nums = [];
for (let i = 0; i < number; i++) {
nums.push({ numberName: i, key: i });

console.log(nums)
}
setNumbers((numbers) => [...numbers, ...nums]);

我不认为问题出在循环中，但反应是在不显示组件的情况下调用循环。这会造成一个无限循环，并且我有太多的重新渲染错误。

这是 console.log(nums) 显示的内容(screenshot of the console)

这是我尝试渲染数组的方式：

if(!fontsLoaded) {return <AppLoading />} 
else {return (
    <View>
        <FlatList
            showsHorizontalScrollIndicator={false}
            horizontal={true}
            data={numbers} //la data qu'on va afficher
            renderItem={({ item }) => (
                <Text style={styles.number}>{item.numberName}</Text>
            )} //la fonction qu'il va rendre
        />
    </View>
)}

为什么我有太多的重新渲染错误，我该如何解决？

【问题讨论】：

标签： javascript reactjs react-native setstate

【解决方案1】：

let [numbers, setNumbers] = useState([]);
useEffect(()=>{
const nums = numbers.map((value,index)=> {numberName: index,key: index})
setNumbers([...numbers, ...nums])
},[])

你需要在 useEffect 钩子中做分配/状态相关的东西。

【讨论】：

【解决方案2】：

为了考虑到状态的变化，您需要使用useState 钩子来实现，如下所示：

    const number = props.numberProp;

    let [numbers, setNumbers] = useState([]);

    useEffect(() => {    
    let nums = [];
        for (let i = 0; i < number + 100; i++) {
        nums.push({ numberName: i, key: i });
        }
    setNumbers((numbers) => [...numbers, ...nums]);
    }, [])

【讨论】：