javascript - CheckBoxes React Native Map 函数返回错误:重新渲染太多。React 限制渲染次数以防止无限循环
问题描述
我有这段代码,应该绘制复选框。
这是我的 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 限制了渲染的数量以防止无限循环。我在哪里犯了错误?
解决方案
我认为这可能是因为setHastags(HashtagsList)
这导致 Hashtags 组件最终陷入无限循环。
您可以初始化初始 HashtagsList,如:
const [hashtags, setHastags] = useState(HashtagsList);
推荐阅读
- java - 同步代码执行
- sql - 如何在更新语句中避免 ORA-01427?
- php - 在 laravel 的刀片中使用 old() 函数和另一个默认值作为输入
- python-3.x - 在 Python3.6 上运行的 Jupyter 笔记本上导入 FBPROPHET 时出现问题
- scenekit - ARKit 可以显示 WKWebview 吗?
- amazon-web-services - 如果用户未使用 AWS Cognito 登录,如何重定向页面
- xmpp - 加入会议无响应 SmackException NoResponseException
- android - 无法将 USB 连接更改为仅充电
- python - 如何根据odoo 10中的计算结果保留选定的布尔字段?
- php - Ajax php 选择选项