CheckBoxes React Native Map 函数返回错误：重新渲染太多。 React 限制渲染次数以防止无限循环

Question

我有这段代码，应该会画出复选框。

这是我的 Hashtags.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;

我的 main.js 页面如下所示：

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

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

Answer 1

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

你可以像这样初始化初始的 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);
}