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进行更改的机会，那会更好。

使用componentDidUpdate更改组件中的状态

1 个答案: