React Component不會收到新的道具

Question

這是我的App組件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps===>", nextProps);
  }
  clickHandler() {
    const { isLoading, request } = this.props;
    request();
  }
  render() {
    return (
      <span>
        <button onClick={this.clickHandler}>Request</button>
      </span>
    );
  }
}

以下是我渲染的方式：

let isLoading = false;
const request = function() {
  isLoading = true;
};

ReactDOM.render(
  <App isLoading={isLoading} request={request} />,
  document.querySelector("#app")
);

當用戶單擊按鈕時， isLoaing變量將更改。 但是， <App />似乎沒有收到它，因為componentWillReceiveProps沒有調用

為什么？

Answer 1

即使您的Prop isLoading正在更新，也沒有什么會觸發重新渲染

ReactDOM.render(
  <App isLoading={isLoading} request={request} />,
  document.querySelector("#app")
);

並且由於未再次調用ReactDOM.render ，因此App組件中不會收到新的prop

你也可以編寫一個接收isLoading道具並重新渲染的App的父級

class Parent extends React.Component {
   state = {
      isLoading: false
   }
   request = () => {
      this.setState({ isLoading:true });
   }
   render() {
      return <App isLoading={isLoading} request={request} />
   }
}


ReactDOM.render(
  <Parent />,
  document.querySelector("#app")
);