Question

我有一个组件正在使用从道具传入的数据打印到屏幕上。但是，在第一次渲染时，没有数据。当数据通过道具输入时，我使用getDerivedStateFromProps来设置状态，但是屏幕上的数据不会更新。我尝试将文本作为一个单独的组件并将数据传递给它，因为以前我已经通过这种方式解决了类似的问题。但是我没有尝试过。

状态正在成功更新，正如我在控制台日志中看到的那样。但是，我在渲染时打印的长度数据始终保持为0。

这是代码：

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.pricesData !== prevState.pricesData) {
      return { pricesData: nextProps.pricesData };
    } else {
      return null;
    }
  }

  componentDidUpdate = () => {
    this.renderExp();
    console.log(this.state.pricesData);
  };

  renderExp = () => {
    this.props.pricesData.forEach((set) => console.log(set));
  };

  onClose = () => {
    this.props.hideModal();
  };

  render() {
    return (
      <div className="cookie-modal">
        <div>{this.state.pricesData.length}</div>
        <button onClick={this.onClose}>Close</button>
      </div>
    );
  }

反应：getDerivedStateFromProps不触发重新渲染

0 个答案: