javascript - React Component 没有收到新的 Prop

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 Prop 并像这样重新渲染

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")
);