Question

我想以反应状态存储数组对象。我不知道自己缺少什么，但是我的代码无法正常工作。这是我的代码如下：

export default class Groups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabledata: []
    }
  }

  componentDidMount() {
    this.setState({
      tabledata: [...this.state.tabledata, {"name": "name1"}]
    })

    console.log("HI")
    console.log(this.state.tabledata)
  }
}

控制台日志返回空状态，不在状态数组中存储任何内容。.请在这里提出问题。预先谢谢您。

Answer 1

那里有两个独立的问题，但都源于同一原因：State updates are asynchronous.

所以这两个问题是：

您正在通过将对象传递到setState中来基于现有状态设置状态。那可能会设置过时的状态。根据现有状态更新状态时，您必须使用回调版本setState。
您在致电setState后立即记录状态。那将看不到更新状态，因为更新是异步的。而是将其记录在完成回调中（如果您需要使用它来做一些事情；通常，您不需要这样做，只需允许React重新渲染即可，默认情况下会进行渲染）。

以下是对您的代码进行的更正：

export default class Groups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabledata: []
    }
  }

  componentDidMount() {
    this.setState(
      // Update callback receives the current state. Here I'm picking
      // `tabledata` from it via destructuring
      ({tabledata}) => ({
        tabledata: [...tabledata, {"name": "name1"}]
      }),
      // Completion callback
      () => {
        console.log("HI")
        console.log(this.state.tabledata)
      }
    )
  }
}

实时示例：

class Groups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabledata: []
    }
  }

  componentDidMount() {
    this.setState(
      ({tabledata}) => ({
        tabledata: [...tabledata, {"name": "name1"}]
      }),
      () => {
        console.log("HI")
        console.log(this.state.tabledata)
      }
    )
  }
  
  render() {
    return this.state.tabledata.map(({name}) => <div>{name}</div>);
  }
}

ReactDOM.render(<Groups />, document.getElementById("root"));

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

不过，通常，您通常不需要或不想使用完成回调，所以：

export default class Groups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabledata: []
    }
  }

  componentDidMount() {
    this.setState(({tabledata}) => ({
      tabledata: [...tabledata, {"name": "name1"}]
    }));
  }
}

Answer 2

您可以将对象推入数组：

    export default class Groups extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        tabledata: []
      }
    }

    componentDidMount() {
      this.setState({
        // tabledata: [...this.state.tabledata, {"name": "name1"}]
            tabledata: this.state.tabledata.push({"name": "name1"})
      })

      console.log("HI")
      console.log(this.state.tabledata)
    }

反应状态数组问题

2 个答案: