React 搜索框输入搜索条件后同步更新state的问题

[Z.Chen]

主页面<Main />：

import React from 'react';
import Axios from 'axios';
import Card from './Card';
import '../css/main.css'
import 'font-awesome/css/font-awesome.min.css';

class Main extends React.Component{

  state = {
    cards:[],
    keyword:'',
  }

  componentDidMount(){  
    this.retreiveData();
  }

  retreiveData = () =>{
    Axios.get(`${process.env.REACT_APP_API_URL}/cards`)
    .then(response => {
      this.state = {cards: response.data};
      this.setState(this.state)
    })
    .catch(function(error){
      console.log(error.response)
    })
  }


  handleSearchChange =(e) =>{
    console.log(this.state.keyword)
    this.setState({keyword: e.target.value })
    
  }


  handleSearchSubmit = (e) => {
    e.preventDefault();
    this.retreiveData();

    let newData =[];
    var data = this.state.cards
    data.map((item)=>{
      if(item.companyName.indexOf(this.state.keyword) >= 0){
        newData.push(item)
      }
    });

    console.log(newData)

    this.setState({cards:newData},()=>{
      
     console.log(this.state.cards)

    })

    console.log(this.state.cards)
  }

  render(){
    return ( 
      <>
        <section className="jumbotron text-center">
          <div className="container">
            <form className="form-group" onSubmit={this.handleSearchSubmit}>
              <input type="text" className="form-control" placeholder="Search this site" 
                onChange={this.handleSearchChange}
              />
                <button className="btn btn-secondary" type="submit">
                  <i className="fa fa-search"></i>
                </button>
            </form>
          </div>
        </section>
      
        <Card cards={this.state.cards}/>
      </>
    );
  }
}
export default Main;

主页面把state中的cards传给子组件<Card />.


需求：好比初始化时从数据库一共返回10条数据（10个card），我输入搜索条件后只有8个符合的，那么只需要显示这8个。

问题在于：输入条件后，49行log出来为8个，但是接下来我setState后再在57行log，出来的还是10个。 我查了下，因为setState 不是同步的，但是可以在setState 提供的回调函数中得到最新的状态（53行log出来确实也是只有8个）。

请问：这个setState里的最新state怎么传到render()中的<Card cards={this.state.cards}/>中去？从而实现只显示8个card的结果？谢谢

[weixin_50944805]

this.setState({
      count: this.state.count + 1
    }, () => {
      console.log('完成回调函数')