export class ABC extends React.Component { constructor(props) { super(props); this.state = { abc: null }; } renderOptions() { this.setState({ abc: abcArray.length !== 0 }); return; } renderRadio() { return ( <Field id="abc" name="abc" values={this.renderOptions()} /> ); } render() { return ( <div> {this.renderRadio()} </div> ); } } export default connect(mapStateToProps)(ABC);Estoy tratando de establecer el estado en renderOptions(), lo que me da el siguiente error.
Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
No puedo entender qué estoy haciendo mal aquí.
cualquier ayuda es apreciada.
Su método de render está llamando a setState , lo que activará el render para que se vuelva a llamar.
No debe llamar a setState dentro de renderOptions .
en renderRadio() -> values={this.renderOptions()} está llamando a la función renderOptions. esa función llama a this.setState({abc: abcArray.length !== 0}); . luego reaccionar intentará volver a renderizar el componente. esto creará un bucle. para evitarlo, debe cambiar los valores prop a this values={this.renderOptions}
He refactorizado tu código.
export class ABC extends React.Component { constructor(props) { super(props); this.state = { abc: null }; } renderOptions() { this.setState({ abc: abcArray.length !== 0 }); return; } renderRadio() { return ( <Field id="abc" name="abc" values={this.renderOptions} /> ); } render() { return ( <div> {this.renderRadio()} </div> ); } } export default connect(mapStateToProps)(ABC);