reactjs - 如何在 react 和 redux 中的 componentDidUpdate() 中调用 Action 和设置状态(防止无限循环)

Question

我的项目中有一个导航栏，这对所有人来说都是通用的
它有一个输入文本字段

<input
    placeholder="Search Assets"
    type="text"
    id="searchTerm"
    onChange={this.searchAsset}
    value={this.state.searchValue}
/>

和函数 onChange 我正在重定向到库页面

searchAsset = event => {
    const searchValue = event.target.value;
    this.setState({ searchValue });
    if (searchValue.trim().length > 2) {
      this.props.history.push(`/company/library?q=${searchValue}`);
    }
  };

在库页面中，我在 componentDidMount() 中调用搜索操作

componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    this.setState({ searchValue: q });
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }

现在的问题是每当我再次搜索时 - 假设最初我搜索“图像”，在获得结果后我删除了顶部导航中的文本并再次搜索文本“下载”
我没有得到后端的任何回应
现在我想用

componentDidUpdate(prevProp, prevState) {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q !== prevState.searchValue) {
      this.props.actions.searchAssets({ page: 0, searchString: q });
    }
  }

我收到错误 超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。

Answer 1

问题
您的 componentDidUpdate版本不太匹配 componentDidMount版本。你总是比较q至 prevState.searchValue但不要更新状态，因此下次更新时比较为假。 q !== prevState.searchValue从不导致 false 并且您似乎将一堆导致渲染循环的操作排入队列。
解决方案
缓存当前搜索结果以进行下一次状态更新比较，以便仅在新搜索查询到达时才运行效果。

componentDidUpdate(prevProp, prevState) {
  const params = new URLSearchParams(this.props.location.search);
  const q = params.get('q');
  if (q !== prevState.searchValue) {
    this.setState({ searchValue: q }); // <-- update state with search value
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }
}