Question

我在最近的一个问题中遇到了这个准系统React组件。我正在玩它，并试图在state中的现有对象数组中添加一个新项目（一个对象）。但它会引发过多的递归＆＃34;错误。

我在React中查看了其他类似问题的问题，但我没有在this.setState()中调用componentDidMount()。我也不是从它的render()方法渲染相同的组件。所以，我不确定导致此错误的原因。

＆＃13;

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} ${e.w}`}</li>)}
        </ul>
      
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

＆＃13;

<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>

＆＃13;

在构造函数中设置的初始项集确实在开始时呈现，但是＆＃34;添加＆＃34;按钮似乎无法正常工作。

此外，随着递归错误，我遇到了＃34; RegExp太大＆＃34;几次，当我测试这个时。

Answer 1

您的语法不正确。使用带有setState语法的prevState时，您需要返回更新后的状态，并且在更新程序功能中也不应该有终止;。

＆＃13;

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} ${e.w}`}</li>)}
        </ul>
      
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

＆＃13;

<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>

＆＃13;

简单的React组件抛出过多的递归＆＃34;错误

1 个答案: