如何通过两个反应组件之间的父亲通过父

Question

我有两个不同的反应组件在我的应用程序名为searchbar和infinitesCroller中放置了一个。

function App() {

  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="App">
      <SNavbar></SNavbar>
      <MainLogo></MainLogo>
      <SearchBar search={setSearchTerm}></SearchBar>
      <hr/>
      <InfiniteScroller term={searchTerm}/>
      <Footer/>
    </div>
  );
}

搜索栏组件具有自己的状态，在编辑输入时，它在该状态下更新搜索术语，并在单击按钮时调用其父级的setSearch函数（该函数在父母中传递为prop

function SearchBar(props)
{
  const [search,setSearch] = useState("");

    return(      
        <Container className="Search-Bar">
        <Row>
          <Col>
          <InputGroup >
    <FormControl
      placeholder="What are we making today?" 
      onChange={event => setSearch(event.target.value)}
    />
    <Button onClick={() => props.search(search)}>
      Go!
    </Button>
  </InputGroup>
          </Col>
        </Row>
      </Container>)
}

）由搜索栏组件更新，将其作为属性传递到InfinitesCroller组件中，并将其设置为其状态对象中的搜索项字段。

class InfiniteScroller extends React.Component
{

    constructor(props)
    {
      super(props);
      this.state =   
        {
        items:[],
        page:1,
        hasMore:true,
        searchTerm:props.term
      };
    }

    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((i, index) => (
            <Col key={index} lg="2" md="4" sm="6" xs="12">
              <ImageCell className="ImageCell" link = {this.state.items[index].link}> - #{index}</ImageCell>
            </Col>
          ))}
</Row>
  
</InfiniteScroll>
    )
}
}

但是，当按下搜索栏组件上的按钮触发app.js的setSearchTerm函数时，InfinitesCroller似乎不会更新。由于其状态的搜索端字段仍然出现为“未定义”，并且组件本身并未重新渲染以表示属性的变化。 我希望InfinitesCroller能够完全重新渲染自己，并进行一些API调用以用内容填充自己，我该如何实现？

到目前为止，我尝试添加在其中具有搜索术属性的HTML标签，以检查React Skips重新渲染的组件是否不“使用”任何属性但尚未使用。

Answer 1

道具的更改并不能使UI重新渲染，但国家的更改确实如此。
它有2种潜在的解决方法可以具有适当的UI重新渲染。

更改时，可以更新您的功能

<InfiniteScroller term={searchTerm} key={searchTerm}/>

对于第一个，您可以将键属性添加到组件中，这将帮助您在键第二种方式 ，您可以更新该组件的本地状态在基于功能的组件中使用）

class InfiniteScroller extends React.Component
{

    constructor(props)
    {
      super(props);
      this.state =   
        {
        items:[],
        page:1,
        hasMore:true,
        searchTerm:props.term
      };
    }

    //update states according to props change
    componentDidUpdate(prevProps) {
       if(this.props.searchTerm !== prevProps.searchTerm) {
          setState({ searchTerm: this.props.searchTerm })
       }
    }

    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((i, index) => (
            <Col key={index} lg="2" md="4" sm="6" xs="12">
              <ImageCell className="ImageCell" link = {this.state.items[index].link}> - #{index}</ImageCell>
            </Col>
          ))}
</Row>
  
</InfiniteScroll>
    )
}
}