简单的 React 组件抛出“递归过多”错误

Question

I came across this barebones React component in a recent question. I was playing around with it, and tried to add a new item (an object) to the array of existing objects in state . But it throws "too much recursion" error.

I've looked at other questions with similar problems in React, but I'm not invoking this.setState() in componentDidMount() . Neither am I rendering the same component from it's render() method. So, I'm not sure what causes this error.

 class App extends React.Component { constructor(props) { super(props); this.state = { Items: [ {w:1, b:8, name: 'banana'}, {w:7, b:3, name:'apple'}, {w:3, b:5, name:'kiwi'}, {w:6, b:3, name:'strawberry'}, {w:5, b:1, name:'orange'}] }; this.addItem = this.addItem.bind(this); //this.handleAdd = this.handleAdd.bind(this); } // handleAdd() { // this.addItem(10, 5, "mangoes"); // } addItem(){ this.setState(prevState => { Items: [...prevState.Items, {w: 20, b: 3, name: "mangoes"}]; }); } render() { return ( <div> <button className="btn btn-default" onClick={this.addItem}>Add</button> <ul> {this.state.Items.map(e => <li key={e.name}>{`${e.name} ${ew}`}</li>)} </ul> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div>

The initial set of items that was set in the constructor does render at the start, but the "add" button doesn't seem to be working.

Additionally, along with the recursion error, I came across "RegExp too big" a few times, while I was testing this.

Answer 1

Your syntax is incorrect. When using setState with prevState syntax, you need to return the updated state and also you shouldn't have a terminating ; inside the updater function.

 class App extends React.Component { constructor(props) { super(props); this.state = { Items: [ {w:1, b:8, name: 'banana'}, {w:7, b:3, name:'apple'}, {w:3, b:5, name:'kiwi'}, {w:6, b:3, name:'strawberry'}, {w:5, b:1, name:'orange'}] }; this.addItem = this.addItem.bind(this); //this.handleAdd = this.handleAdd.bind(this); } // handleAdd() { // this.addItem(10, 5, "mangoes"); // } addItem(){ this.setState(prevState => ({ // notice here use return or use wrapping () Items: [...prevState.Items, {w: 20, b: 3, name: "mangoes"}] // <-- not semicolon here })); } render() { return ( <div> <button className="btn btn-default" onClick={this.addItem}>Add</button> <ul> {this.state.Items.map(e => <li key={e.name}>{`${e.name} ${ew}`}</li>)} </ul> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div>