尝试显示 FlatList 时出现太多 rerednders 错误

Question

我正在尝试显示一个数字列表，如下所示：(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]);

我不认为问题出在循环中，但 React 正在召回循环而不显示组件。这造成了一个无限循环，我有太多重新渲染错误。

这是 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>
)}

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

Answer 1

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

您需要在 useEffect 挂钩中执行 assignment/state-related 操作。

Answer 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]);
    }, [])

尝试显示 FlatList 时出现太多 rerednders 错误

Too many rerednders error by trying to show a FlatList

javascript

setstate

reactjs

react-native