复选框 React Native Map 函数返回错误:重新渲染次数过多.React 限制渲染的数量以防止无限循环

Question

我有这个代码，应该画复选框。

这是我的主题标签.js文件：

import React, { useState } from 'react';
import {StyleSheet, View, Image} from 'react-native';
import { CheckBox } from 'react-native-elements';
const HashtagsList =[
{checked: false, title: '#tip1'},
{checked: false, title: '#tip2'},
{checked: false, title: '#tip3'},
{checked: false, title: '#tip4'},
{checked: false, title: '#tip5'},
{checked: false, title: '#tip6'}, 
];
const Hashtags = props => { 
const [hashtags, setHastags] = useState([]);
setHastags(HashtagsList);
const toggleCheckbox = (title) =>{   
const checkedHashtags = hashtags.find((hashtag) => hashtag.title === title);
checkedHashtags.checked = !checkedHashtags.checked;
const checkboxes = Object.assign({}, hashtags, checkedHashtags);
setHastags({ checkboxes });
};
hashtags.map((hashtag, i) => {
console.log(hashtag);
return (
<CheckBox
key = {i}
title = {hashtag.title}
checkedIcon={<Image style={styles.chekBoxPic} source={require('../assets/svg/checked.svg')} />}
uncheckedIcon={<Image style={styles.chekBoxPic} source={require('../assets/svg/unchecked.svg')} />}        
checked={hashtag.checked}
onPress={() => toggleCheckbox(hashtag.title)}
/> 
);
})
};
const styles = StyleSheet.create({   
chekBoxPic:{
width: 22, 
height: 22, 
},
});
export default Hashtags;

我的主页.js如下所示：

...
<View type={styles.someStyle}>
<Hashtags />
</View>
...

但是我得到错误："重新渲染太多。React 会限制渲染的数量，以防止无限循环。 我哪里犯了错误？

Answer 1

我认为这可能是因为setHastags(HashtagsList)导致主题标签组件最终陷入无限循环。

您可以初始化初始主题标签列表，例如：

const [hashtags, setHastags] = useState(HashtagsList);

Answer 2

我认为问题出在HashTags组件的前几行：

const Hashtags = props => { 
const [hashtags, setHastags] = useState([]);
// Every time your react component re-renders, it sets the state
// Of the hashtags. This causes the component to end up in an infinite loop
setHastags(HashtagsList);
}

您可以在useState调用中对其进行初始化，而不是单独设置初始主题标签，如下所示：

const Hashtags = props => { 
const [hashtags, setHastags] = useState(HashtagsList);
}