Question

我是React的新手。我写了一个项目，上面有一个搜索组件。搜索工作正常（我在console.log上进行了检查），但是我不知道如何调用应在其上显示搜索结果的无状态函数组件？

class SearchCard extends Component {
  // qQuery is a variable for query input
  state = { qQuery: "" };
  
  HandleSearch= async (e) => {
    e.preventDefault();
    const {data:cards}  = await cardService.getAllCards();
    var searchResults = cards.filter((item) =>
      item.qTopic.includes(this.state.qQuery) || 
      item.qArticle.includes(this.state.qQuery)
    );
    this.setState({ cards : searchResults }); 
    //   console.log('search results ',searchResults, '  cards ',this.state);
    return <CardRender cards={cards}/> 
  }  

  render() {
    return (
      <React.Fragment>
        <form className="form" onSubmit={ this.HandleSearch }>
          <div className="input-group md-form form-sm form-1 pl-4 col-12">

const CardRender = ({cards,favs,onHandleFavs}) => {
  return (         
    <div className="row">
      {cards.length > 0 &&
        cards.map((card) =>
          <Card key={card._id}
            card={card} 
            favs={favs} 
            onHandleFavs={() => onHandleFavs(card._id)}
          />
      }
    </div>
 );
}
     
export default CardRender;

screenshot

Answer 1

您应该将<CardRender cards={cards}/>添加到元素render返回（在您想要的位置）并在state.cards不为空的情况下呈现它。

类似这样的东西

class SearchCard extends Component {
  // qQuery is a variable for query input
  state = { qQuery: "" };
  
  HandleSearch= async (e) => {
    // ...
    this.setState({ cards : searchResults }); 
  }

  render() {
    return (
      <div>
        ...
        {cards?.length && <CardRender cards={cards}/>}
      </div>
    );
  }
}

如何从另一个组件呈现无状态功能组件

1 个答案: