Question

我是React的新手。我坚持这个，真的很感激一些帮助！

父组件会将数组传递给此子组件。当我在console.log（this.props.repairs）时，它向我显示了一个4的数组。每当传入修复数组时，我都会尝试更新this.state.sortedDataList。控制台.log（this.state）仍然是将sortedDataList显示为空数组。

我做错了什么？非常感谢，感谢任何帮助。

class Repairs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sortedDataList: []
    };
  }

  componentWillReceiveProps(nextProps) {
    if(this.props != nextProps) {
      this.setState({
        sortedDataList: this.props.repairs
      });
    }
  }

  render() {
    console.log(this.props);
    console.log(this.state);

    return (
      <div></div>
    );
  }
}

Answer 1

没关系，发现我的愚蠢错误！如果其他人在将来陷入困境......

componentWillReceiveProps(nextProps) {
  if(this.props != nextProps) {
    this.setState({
      sortedDataList: nextProps.repairs
    });
  }
}

Answer 2

第一次渲染时未调用

componentWillReceiveProps。这就是你没有在状态中看到任何更新的原因

来自React Docs：

“组件接收新道具时调用。不会为初始渲染调用此方法。”

如果您想第一次进行更改，可以使用componentWillMount生命周期功能并更新状态。在随后更改时，将调用componentWillReceiveProps。

class Repairs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sortedDataList: []
    };
  }

  componentWillMount() {
   
      this.setState({
        sortedDataList: this.props.repairs
      }, () => console.log(this.state.sortedDataList));
    
  }
   componentWillReceiveProps(nextProps) {
    if(this.props != nextProps) {
      this.setState({
        sortedDataList: nextProps.repairs
      });
    }
  }

  render() {
    console.log("r",this.props);
    console.log("r",this.state);

    return (
      <div></div>
    );
  }
}

class App extends React.Component {
  render() {
    var arr = ["1", "2", "3"];
    return (
      <div >
        <Repairs repairs={arr}/>
      </div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

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

Answer 3

在你的构造函数

中

this.state = {
  sortedDataList: []
};

您最初将状态设置为空数组，因此首先渲染它将为空。然后，每当更改道具时，它将通过componentWillReceiveProps（）更新。

正如Shubham所说，在第一次渲染时没有调用componentWillReceiveProps（）。如果你希望状态从第一个渲染中直接反映道具，你必须将它放在构造函数中，如下所示：

this.state = {
  sortedDataList: this.props.repair
};

接收新道具时状态不更新（ReactJS）

3 个答案: