Reactjs 反应：子组件正在传递它'；s状态更新到父级，但一旦父级拥有它，父级就不会更新其状态

我这里的问题是，我有一些来自SearchForm组件的值。它们将正确的值作为参数传递给handleSearch函数，但我对setState的调用没有任何作用。我包含了console.logs来显示变量中存储的内容。请参阅下面代码中的注释

因为我的状态是作为空字符串从该组件传递给ResultList组件的，所以ResultList无法正确呈现

import React, { Component } from 'react';
import axios from 'axios';
import SearchForm from './components/search_form';
import ResultList from './components/results_list';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { category: '', term: '', results: [] };
    this.handleSearch = this.handleSearch.bind(this);
  }

  handleSearch(category, term) {

    //This is not setting the state!!!!!
    this.setState({ category, term });

    //The first two console.logs successfully log the arguments to this 
    function
    //The last two console.logs log empty strings even after the above 
    setState call.

    console.log("Received from form: " + category);
    console.log("Received from form: " + term);
    console.log("#################################");
    console.log(this.state.category);
    console.log(this.state.term);


    console.log('http://swapi.co/api/' + category + '/?search=' + term);
    axios.get('http://swapi.co/api/' + category + '/?search=' + 
term).then((response) => {
        let results = response.data.results;
        this.setState({ results });
        console.log(this.state.results);
    }).catch((error) => {
      console.log(error);
    });

  }

  render() {
    return (
      <div className="container panel panel-default">
        <SearchForm handleSearch={this.handleSearch}/>
        <ResultList results={this.state.results} category=
{this.state.category}/>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“axios”导入axios；
从“./components/search_form”导入SearchForm；
从“/components/results_list”导入结果列表；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={category:''，term:''，results:[]}；
this.handleSearch=this.handleSearch.bind（this）；
}
handleSearch（类别、术语）{
//这不是设定状态！！！！！
this.setState（{category，term}）；
//前两个console.logs成功地将参数记录到此
功能
//最后两个console.logs记录空字符串，即使在上述
设置状态呼叫。
console.log（“从表格：+类别接收”）；
console.log（“从表格：+术语中接收”）；
控制台日志；
console.log（this.state.category）；
console.log（this.state.term）；
console.log（'http://swapi.co/api/“+类别+”/？搜索=”+术语）；
axios.get（）http://swapi.co/api/“+类别+”/？搜索=”+
然后（（响应）=>{
让结果=response.data.results；
this.setState（{results}）；
log（this.state.results）；
}).catch（（错误）=>{
console.log（错误）；
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

我将详细说明我在评论中说的话：

Component#setState

延迟并批处理性能状态更新请求。因此，您无法在调用后立即使用新值更新

组件的状态

setState
提供了第二个参数—在执行状态更新操作后调用的回调。在你的情况下，看起来

this.setState({ category, term }, () => {
  console.log(this.state.term, this.state.category)
  // now you can use them
}) 

我将详细说明我在评论中所说的话：

Component#setState
延迟并批处理性能状态更新请求。因此，您无法在调用后立即使用新值更新
组件的状态

setState
提供了第二个参数—在执行状态更新操作后调用的回调。在你的情况下，看起来

this.setState({ category, term }, () => {
  console.log(this.state.term, this.state.category)
  // now you can use them
}) 

setState不是同步函数调用，因此在函数中调用setState可能不会立即更新状态。从文件上看

setState（）将更改排入组件状态队列，并告知React需要使用
更新状态。这是用于更新用户的主要方法
接口以响应事件处理程序和服务器响应。想想
setState（）作为更新
组成部分。为了更好地感知性能，React可能会延迟，并且
然后在一次过程中更新多个组件。反应不起作用
确保立即应用状态更改

so
console.log（this.state.category）；console.log（this.state.term）
不会记录更新的状态。但如果将这些语句放在render函数中，您将看到在下一个render中设置了正确的状态

阅读有关
setState的详细信息setState不是同步函数调用，因此在函数中调用setState可能不会立即更新状态。从文件上看

setState（）将更改排入组件状态队列，并告知React需要使用
更新状态。这是用于更新用户的主要方法
接口以响应事件处理程序和服务器响应。想想
setState（）作为更新
组成部分。为了更好地感知性能，React可能会延迟，并且
然后在一次过程中更新多个组件。反应不起作用
确保立即应用状态更改

so
console.log（this.state.category）；console.log（this.state.term）
不会记录更新的状态。但如果将这些语句放在render函数中，您将看到在下一个render中设置了正确的状态

阅读有关此设置的详细信息。设置状态是异步的。使用
this.setState（{…}，（）=>{/*dostuff here*/}）
完成它。我是新手，所以感谢您指出这一点。可能重复的
this.setState
是异步的。使用
this.setState（{…}，（）=>{/*dostuff here*/}）
完成它。我是新来的，所以谢谢你指出这一点。可能是重复的，我认为这也不管用。回调函数将具有相同的状态，而不是更新状态。如果要在回调中使用新变量，则必须在function@bhaskarsharma我不确定我是否遵循了-如果您想在回调中使用新变量，这是什么意思？@bhaskarsharma check:）假设您想在回调函数
（）=>{console.log中使用category和term（this.state.term，this.state.category）//现在您可以使用它们了}）
那么this.state.term和this.state.category将不是更新的状态变量，而是相同的旧变量，因此您必须在回调中传递新变量
（term，category）=>{console.log（term，category）//现在可以使用它们了})
像这样，没有。。。回调没有任何参数。我认为即使这样也不行。卡尔巴酒店