javascript - 使用 componentDidUpdate 更改组件中的状态

Question

我在一个容器中放置了两个组件。一种是调用出版物的 Id，另一种是调用特定 publicationId 中的问题日期。

当我调用 Id 例如 100 时，它也会从该 Id 加载问题。之后我还可以根据 issueDate 进行过滤。但是，当我再次使用 Id 更改组件以获取其他问题列表时，它不会重新呈现存在问题的组件。

我听说使用componentDidMount时这个问题得到了解决，但我不知道执行此步骤后该怎么办:

 public componentDidUpdate(): void {
    const{ data, date } = this.state
    if (this.state.data !== data) {

//don't know what to do in this if statement

} 

这是使用 axios 获取发布 Id 的代码:

 constructor(props: TTestProductionProgressStatus) {
    super(props);
    this.state = {
      date: null,
      data: undefined,
      prodItem: []
    };
  }

  public componentDidMount(): void {
    const urlDate = this.props.location.pathname.split("/")[3];
    const date = urlDate
      ? new Date(
          `${urlDate.substr(0, 4)}-${urlDate.substr(4, 2)}-${urlDate.substr(
            6,
            2
          )}T00:00:00.000+01:00`
        )
      : null;
    axios
      .get<Definitions.ProductionProgressStatus[]>(
        "http://app30:665/v1/productionProgressStatus/crud?publicationId=" +
          this.props.id
      )
      .then(res => {
        this.setState(
          {
            data: res.data
          },
          () => this.handleDateChange(date)
        );
      })
      .catch(error => console.log(error.response));
  }

Answer 1

首先要解决的是您的比较不正确:

const{ data, date } = this.state
if (this.state.data !== data) {

这里您将 this.state.data 与 this.state.data 进行比较；您只是以两种不同的方式提取它，但您正在比较的是相同的属性。比较新旧状态的方法是通过 the parameters passed to componentDidUpdate :

componentDidUpdate(prevProps, prevState) {
  if (this.state.data !== prevState.data) {

至于您在 if 语句中执行的操作，您可能想要对 setState 进行某种调用，这将导致另一次更新。一般来说，最好尽可能避免级联更新，这样就不会不必要地引发两个不同的重新渲染；换句话说，如果您发现有机会在不使用 componentDidUpdate 的情况下进行更改，那就更好了。