[英]I have an error: Too many re-renders. React limits the number of renders to prevent an infinite loop
I'm new here on the site, this is my first comment.我是网站上的新人,这是我的第一条评论。 I have a problem that I can not solve.
我有一个我无法解决的问题。 I'm new to React, I built a component, which gets from the redux an array called Categories.
我是 React 的新手,我构建了一个组件,它从 redux 获取一个名为 Categories 的数组。
I want to print this array as a list to the user.我想将此数组作为列表打印给用户。
That's what I'm trying to do, but I'm getting the error.这就是我想要做的,但我收到了错误。
Error: Too many re-renders.错误:重新渲染太多。 React limits the number of renders to prevent an infinite loop.
React 限制渲染次数以防止无限循环。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
//Redux
import { connect } from 'react-redux';
import { getCategories } from '../../redux/actions/dataActions';
function valuetext(value) {
return `${value}`;
}
const styles = (theme) => ({
...theme.spreadThis
});
function PreferenceList(props) {
const {
classes,
user: loading
}
} = props;
const [filledCategories, setFilledCategories] = React.useState(props.categories);
if (loading) {
console.log ("nothing for now...");
}
const handleChange = (event, value) => {
console.log("nothing for now...")
};
return (
<React.Fragment>
<List dense className={classes.root}>
{props.data.categories.map((value, index) => {
console.log(value);
const labelId = `checkbox-list-secondary-label-${index}`;
return (
<ListItem key={value[Object.keys(value)[0]]} button>
<ListItemText id={labelId} primary={`${Object.keys(value)[0]} with rating ${value.rating}`} />
<ListItemSecondaryAction>
<TextField
id={`input-${index}`}
name={`input-${index}`}
type={`input-${index}`}
label={`input-${index}`}
value={filledCategories[index]}
onChange={handleChange(index)}
inputProps={{ 'aria-labelledby': labelId }}
fullWidth
/>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
</React.Fragment>
);
}
const mapStateToProps = (state) => ({
user: state.user,
data: state.data
});
export default connect(
mapStateToProps, { getCategories }
)(withStyles(styles)(PreferenceList));
I do not so much understand where the error is, I'm new to this whole thing.我不太明白错误在哪里,我对这整件事都很陌生。 My assumption is that I'm probably doing too much refreshing the page for some reason.
我的假设是我可能出于某种原因对页面进行了过多的刷新。 But I do not know how to prevent it.
但我不知道如何防止它。 It's hard for me
这对我来说很难
Change onChange
inside TextField component into arrow function.将 TextField 组件内的
onChange
更改为箭头 function。 In your case handleChange
is called infinite amount of times.在您的情况下
handleChange
被称为无限次。
onChange={() => handleChange(index)}
I solved the issue by adding a key to the component.我通过向组件添加密钥解决了这个问题。 I was getting the same error but I had a slightly different problem.
我遇到了同样的错误,但我遇到了一个稍微不同的问题。 when I select an element from a list that opens a new display there was a textarea.
当我 select 打开新显示的列表中的一个元素时,有一个文本区域。 Since they were identical in the render tree it would throw an error.
由于它们在渲染树中是相同的,因此会引发错误。 so adding a key solved the issue.
所以添加一个密钥解决了这个问题。 hope this helps someone.
希望这对某人有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.