React：第二次点击就渲染数据，但第一次点击就不渲染

问题描述

我有一个模式显示我在道具中接收的数据。当我打开模态时，我应该看到从道具显示的选择数据。但是，模态在我第一次打开时为空，而第二次填充时为空。

如果我继续更改道具中的数据，则模式在第一次新点击时保持不变，而在第二次新点击时刷新。

我尝试用setTimeout强制使用它，弄乱componentDidMount，componentDidUpdate和其他生命周期方法的组合，但似乎没有任何效果。我确定这与我在prevData中使用componentDidMount参数有关。但是甚至想到react devtools会显示this.state.pricesData更新，当我尝试从状态进行渲染时，每次都会出现空白。当我调用控制台日志作为setState的回调时，我在控制台日志中得到一个空的数组括号（可以展开以显示所有正确的数组数据，但是我猜想它是在日志之后填充的）。

这是代码：

import React,{ Component } from "react";

import "../../App.css";

let explanations = [];

export default class ExplanationModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pricesData: [],};
  }

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

  // to allow for async rendering
  getSnapshotBeforeUpdate(prevProps) {
    if (prevProps.pricesData !== this.state.pricesData) {
      return this.state.pricesData;
    }
  }

  componentDidMount = () => {
    this.setState({ pricesData: this.props.pricesData },() =>
      console.log(this.state.pricesData)
    );
  };

  componentDidUpdate = (prevData) => {
    this.renderExp(prevData.pricesData);
  };

  renderExp = (data) => {
    explanations = [];
    data.forEach((set) =>
      explanations.push({ title: set.titel,explanation: set.explenation })
    );
  };

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

  render() {
    return (
      <div className="modal">
        <div>
          {explanations.map((item) => (
            <span>
              <h4>{item.title}</h4>
              <p>{item.explanation}</p>
            </span>
          ))}
        </div>
        <button onClick={this.onClose} className="update">
          Close
        </button>
      </div>
    );
  }
}

解决方法

您必须将您的解释数组保持在您的状态。然后在收到新数据时更新状态。因为如果您不更新状态，则react不会触发重新渲染。

您的构造函数应该是

    super(props);
    this.state = {
      pricesData: [],explanations : []
    };
  }

并且您的renderExp函数应该是

renderExp = (data) => {
    explanations = [];
    data.forEach((set) =>
      explanations.push({ title: set.titel,explanation: set.explenation })
    );
    this.setState({ explanations })
  };

内部渲染功能

render() {
    return (
      <div className="modal">
        <div>
          {this.state.explanations.map((item) => (
            <span>
              <h4>{item.title}</h4>
              <p>{item.explanation}</p>
            </span>
          ))}
        </div>
        <button onClick={this.onClose} className="update">
          Close
        </button>
      </div>
    );
  }
}

通过这种方式，您将在更新数据到达时获取它们。