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

2020-12-10 12:18:32 438 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

在MDK5.37版本中添加Complier Version 5（解决Missing Compiler Version 5 ）本文章仅作为个人学习记录，方法也是从其他博主的博客中得到的，链接如下：二、Keil——Missing Compiler Version 5 和 core_cm3.c 问题解决 - YI颗白菜 - 博客园 (cnblogs.com) 问题描述更新最新的keil版本(MDK5.37)后，在编译以前版本的工程文件时，发现出现了非常多的报错，在网上搜索之后发现原来时编译器版本不匹配的问题，即MDK5.37中使用的是Version 6版本的编译器，而缺少Version 5，对于以前编写的工阅读详情

主页面<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的结果？谢谢

...全文