React中通过父组件传递Props后，InfiniteScroller组件未更新且无法重新请求数据的问题求助

你的问题根源在于类组件的constructor只在挂载时执行一次：当父组件的searchTerm更新后，InfiniteScroller的props.term虽然变化了，但组件内部的state.searchTerm并没有同步更新，也没有触发重新获取数据的逻辑。下面是具体的解决方案：

1. 使用componentDidUpdate监听props变化 #

在类组件中，componentDidUpdate生命周期方法会在props或state更新后触发，我们可以在这里对比前后的term props，当发现变化时重置组件状态并重新请求数据：

class InfiniteScroller extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      items:[], 
      page:1, 
      hasMore:true, 
      searchTerm:props.term 
    };
    // 绑定fetchData的this上下文，避免调用时this指向错误
    this.fetchData = this.fetchData.bind(this);
  }

  // 监听props更新
  componentDidUpdate(prevProps) {
    // 检查当前props的term是否和之前的不同
    if (this.props.term !== prevProps.term) {
      // 重置组件状态：清空现有数据、回到第一页、恢复hasMore状态，并同步新的搜索词
      this.setState({
        items: [],
        page: 1,
        hasMore: true,
        searchTerm: this.props.term
      }, () => {
        // 状态更新完成后，重新获取第一页数据
        this.fetchData();
      });
    }
  }

  // 你的数据获取方法（示例）
  async fetchData() {
    // 避免重复请求（比如hasMore已经为false时）
    if (!this.state.hasMore) return;

    try {
      // 根据当前搜索词和页码请求API
      const response = await fetch(`your-api-endpoint?term=${this.state.searchTerm}&page=${this.state.page}`);
      const newItems = await response.json();

      // 如果返回空数据，说明没有更多内容了
      if (newItems.length === 0) {
        this.setState({ hasMore: false });
        return;
      }

      // 合并新数据并更新页码
      this.setState(prevState => ({
        items: [...prevState.items, ...newItems],
        page: prevState.page + 1
      }));
    } catch (error) {
      console.error('数据请求失败:', error);
      this.setState({ hasMore: false });
    }
  }

  render(){ 
    return( 
      <InfiniteScroll dataLength={this.state.items.length} next={this.fetchData} hasMore={this.state.hasMore} loader={<h4>Loading...</h4>} endMessage={ 
        <p style={{ textAlign: 'center' }}> 
          <b>Yay! You have seen it all</b> 
        </p> 
      } > 
        <Row> 
          {this.state.items.map((item, index) => ( 
            <Col key={item.id || index} lg="2" md="4" sm="6" xs="12"> 
              <ImageCell className="ImageCell" link={item.link}> #{index + 1}</ImageCell> 
            </Col> 
          ))} 
        </Row> 
      </InfiniteScroll> 
    ) 
  } 
}

2. 额外优化建议 #

• 使用受控组件简化SearchBar：SearchBar不需要自己维护搜索词状态，可以直接使用父组件的searchTerm和setSearchTerm，减少状态冗余：

  function SearchBar({ searchTerm, setSearchTerm }) { 
    return( 
      <Container className="Search-Bar"> 
        <Row> 
          <Col> 
            <InputGroup > 
              <FormControl 
                placeholder="What are we making today?" 
                value={searchTerm}
                onChange={event => setSearchTerm(event.target.value)} 
              /> 
              <Button onClick={() => {/* 点击按钮时搜索词已经是最新的，直接触发数据更新即可 */}}> Go! </Button> 
            </InputGroup> 
          </Col> 
        </Row> 
      </Container>) 
  }
  

  记得在App组件中把searchTerm也传给SearchBar：<SearchBar searchTerm={searchTerm} search={setSearchTerm}></SearchBar>

• 避免使用index作为key：在map渲染列表时，尽量使用每个item的唯一ID作为key，而不是数组索引，这能提升React渲染性能并避免潜在的渲染错误。

为什么之前的尝试无效？ #

你尝试添加包含SearchTerm属性的HTML标签，但React类组件在props变化时会重新渲染，但你的render方法依赖的是state.searchTerm而非props.term，而state.searchTerm只有在初始化时被设置，后续props变化并没有同步到state，所以组件内容不会更新。

内容的提问来源于stack exchange，提问作者Mr.Grease