Reactjs 如何在react and redux（防止infinte循环）中的componentDidUpdate（）中调用操作和设置状态

我有一个导航栏在我的项目，这是共同的所有 它有一个输入文本字段

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

在库页面中，我调用componentDidMount（）中的搜索操作

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

现在，我想通过以下方式解决这个问题：

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时，可能会发生这种情况。

问题 您的

componentDidUpdate

版本与

componentDidMount

版本不太匹配。您总是将

q

与

prevState.searchValue

进行比较，但不更新状态，因此在下一次更新时比较为false<代码>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 });
  }
}

componentDidUpdate（prevProp，prevState）{
const params=新的URLSearchParams（this.props.location.search）；
常量q=参数get（'q'）；
if（q！==prevState.searchValue）{
this.setState（{searchValue:q}）；//好的，我理解并更新了代码，它工作得很好。但是，每当我正常访问我的库页面而没有任何搜索参数时，我就会变空page@chaitanyagupta如果您的库页面已装入并且没有
q
查询字符串值，那么这似乎是您的库页面应该处理的问题。您能否更详细地描述一下/how是空的？有点超出了这个问题的范围，但是如果你问了一个新问题，那么请在这里随意@me，如果我有时间，我可以看一看。至少你会更快地看到它。这个问题已经解决了-现在我空了，请看这个问题Hi Drew，请看这个问题
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 });
    }
  }

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 });
  }
}