我有一个错误：重新渲染太多。 React 限制渲染次数以防止无限循环

Posted 2023-02-22

【中文标题】我有一个错误：重新渲染太多。 React 限制渲染次数以防止无限循环

【英文标题】：I have an error: Too many re-renders. React limits the number of renders to prevent an infinite loop

【发布时间】：2021-06-04 03:51:38

【问题描述】：

我是该网站的新手，这是我的第一条评论。我有一个我无法解决的问题。 我是 React 新手，我构建了一个组件，它从 redux 中获取一个名为 Categories 的数组。

我想将此数组作为列表打印给用户。

这就是我想要做的，但我得到了错误。

错误：重新渲染过多。 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));

我不太明白错误在哪里，我对这一切都是新手。我的假设是，出于某种原因，我可能做了太多刷新页面的操作。但我不知道如何防止它。对我来说很难

【参考方案1】：

将TextField组件内的onChange改成箭头函数。在您的情况下，handleChange 被称为无限次。

onChange=() => handleChange(index)