Javascript 在react infinite scroll组件中的每个新搜索上替换获取的搜索结果

在这个应用程序中，我从Unsplash API（带有快速后端和React前端）获取图像。页面加载时，将显示常规图像（在

react infinite scroll组件中呈现）。如果搜索某个术语，
搜索
状态将从false变为true。我使用三元运算符有条件地渲染无限滚动组件内的图像：

{this.state.newSearch || this.state.search ? this.state.searchImages.map(image =>
          <Image key={image.id} image={image} />
        ) : this.state.images.map(image =>
          <Image key={image.id} image={image} />
 )}

const SearchInput = props => {

  const onSubmit = e => {
    // Prevents GET request/page refresh on submit
    e.preventDefault();
    props.onFormSubmit();
  };

  return (
    <form onSubmit={onSubmit}>
      <div className="control">
        <input autoFocus value={props.term} onChange={e => props.onSearch(e.target.value)} className="input" type="text" placeholder="Search" />
      </div>
    </form>
  );
}

子搜索组件：

{this.state.newSearch || this.state.search ? this.state.searchImages.map(image =>
          <Image key={image.id} image={image} />
        ) : this.state.images.map(image =>
          <Image key={image.id} image={image} />
 )}

const SearchInput = props => {

  const onSubmit = e => {
    // Prevents GET request/page refresh on submit
    e.preventDefault();
    props.onFormSubmit();
  };

  return (
    <form onSubmit={onSubmit}>
      <div className="control">
        <input autoFocus value={props.term} onChange={e => props.onSearch(e.target.value)} className="input" type="text" placeholder="Search" />
      </div>
    </form>
  );
}

const SearchInput=props=>{
const onSubmit=e=>{
//防止提交时获取请求/页面刷新
e、 预防默认值（）；
props.onFormSubmit（）；
};
返回(
props.onSearch（e.target.value）}className=“input”type=“text”placeholder=“Search”/
);
}
我认为您的逻辑没有任何问题，除了这一部分：

this.setState({
      searchImages: searchImages.concat(res.data.results)
})

当您将新的搜索结果转换为以前的搜索结果时，您只需将其替换即可：

this.setState({
      searchImages: res.data.results
})

fetchSearchImages
中的当前代码依赖于React真正设置它之前的状态。我已向您的存储库发送了PR，以便仅在设置状态后，使用
setState
的回调参数调用
fetchSearchImages

基本上是这个代码

handleSubmit = () => {
  this.setState({
    searchImages: [],
    searchStart: 1,
    search: true,
    newSearch: true
  });

  this.fetchSearchImages();
}

需要更改为：

handleSubmit = () => {
  this.setState({
    searchImages: [],
    searchStart: 1,
    search: true,
    newSearch: true
  }, this.fetchSearchImages);
}

感谢您的回答--这确实会更新结果的第一页，但需要这一部分才能显示该术语的下一页搜索结果（否则，向下滚动时加载动画将继续）。也许我能找到一个解决办法。这是由
InfiniteScroll
实例中的
next={This.state.search？This.fetchSearchImages:This.fetchImages}
控制的。是的，但是当您搜索新图像时不需要它，您需要它在
fetchImages
函数中，而不是在
fetchSearchImages
函数中。我尝试过这个建议（在
fetchSearchImages
中更改为
searchImages:res.data.results
，对于同一个术语，当您不断向下滚动时，它不会获取该术语的新一批搜索结果，只会继续加载。我认为这是因为它获取新结果以添加到该术语的前一批中，并且因为它已经检索到了第一批，没有添加任何新内容（
count
保持不变），
searchStart
没有更改。在
fetchImages
中，使用了
images
而不是
searchImages
，因此可能隐藏了一些逻辑错误……我认为代码也发生了一些变化（至少当我第一次从repo中签出代码时，
fetchSearchImages
根本不在那里……（如果在调用
fetch[Search]Images
之前设置了状态，那么应该不需要这样做）是的，很抱歉，我更新了代码，更新了这个问题，然后还原了代码，还原了这个问题：DBe意识到代码/repo包含非Flash API机密。你应该肯定地撤销/更改它们