debugging setstate即使在使用await时也不工作,建议?

fzwojiic  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(180)

我离完成我的应用程序的一个必要组件如此之近;但是,由于某种原因,对象生成后,它没有设置状态,尽管我对函数名的命令是handleSearchBar,它工作得很好,直到设置状态。就像注解中说的,请假设对象已生成,并且试图从中获取值的变量具有设置状态的数据。

import React,{Component} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import PropTypes from "prop-types";
import axios from 'axios';
import { default as AreaW} from "../WriteFolder/geographicMainComponents/areaMainComponent.jsx";
import { default as CityW} from "../WriteFolder/geographicMainComponents/cityMainComponent.jsx";
import { default  as CountryW} from "../WriteFolder/geographicMainComponents/countryMainComponent.jsx";
import { default as NeighborhoodW} from "../WriteFolder/geographicMainComponents/neighborhoodMainComponent.jsx";
import { default as RegionW} from "../WriteFolder/geographicMainComponents/regionMainComponent.jsx";
import { NavBar } from "../Navbar/navbar.jsx";
import  {MenuList}  from "./MenuList.jsx";
import GeographicLocationSearch from "./geographicSearchBar.jsx";
import { NewObject } from "./newObject.jsx";
class Menu extends React.Component{
    static propTypes = {
        suggestions: PropTypes.instanceOf(Array)
      };
    
      static defaultProps = {
        suggestions: []
      };
    constructor(props) {
        super(props);
        // Don't call this.setState({) here!
        this.state = { name:null,type:"",supra:{},newObject:"",itemName:"",options:[],searchBar:[{locations:["country","region","area","city","neighborhood"]}]};
        this.handleNavBar=this.handleNavBar.bind(this);
        this.handleSearchBar=this.handleSearchBar.bind(this);
    }

      
        
        //to search by location.
        async  componentDidMount(){
            //set possible options
            let name=this.state.name;
            let category='country';
             await this.setState({type:'country'});   
                if(name){
            
                   await axios.get('http://localhost:8080/'+category+'/'+name)
                        .then(res => {
                         this.setState({options:res});
                        
                        }).catch(
                        function (error) {
                        }); 
                        let newSupra=this.state.options[0];
                        await this.setState({supra:newSupra});
                        let ofSupra=this.state.supra;
                        let children=[];
                        ofSupra.map((e)=>{
                            children.push(e);
                        })
                        await this.setState({options:children});
                    }
                    else{
                        let list=[];
                        await axios.get('http://localhost:8080/'+category)
                            .then(res => {
                           
                                list.push(res);
                            }).catch(
                            function (error) {
                                let x=error;
                            }); 

                            await this.setState({options:list[0].data});
                    }
                   
                 //turn to a list of options 
                
        }
        
      //get search parameters
   async handleNavBar(value){
    let list=[];
    await axios.get('http://localhost:8080/'+value)
        .then(res => {
       
            list.push(res);
        }).catch(
        function (error) {
            let x=error;
        }); 

        await this.setState({options:list[0].data});
        await this.setState({kind:value});
   }
   //this is the function.just assume there is a valid object cause there is.

        async handleSearchBar(value){
 
        await axios.get(
          'http://localhost:8080/'+value.category+'/getById/'+value.id)
             .then(res => { this.setState({supra:Object(res.data)}, () => {
                console.log(this.state.supra)});}).catch(
            
           function (error) {console.log(error)
          }
          );

         

        
    
   }
  render() {
    return(
        <div>
            
            <div>
                <NavBar content={this.state.searchBar} handleNavBar={this.handleNavBar} />
            </div>
            <div>
            { /*this is the call */}
               <GeographicLocationSearch handleSearchBar={this.handleSearchBar}/>
            </div>
            <div>
               
                <NewObject category={this.state.type} key={this.state.supra}/>
           </div>
            <div>
                 <MenuList Items={this.state.options} kind={this.state.type}/>
            </div>
               
           
        </div>
        
    );

};
}
export default Menu;
55ooxyrt

55ooxyrt1#

您不能混合使用async awaitthen catch中一个:

try {
 const res = await axios.get(`http://localhost:8080/${value.category}/getById/${value.id}`)
 newObject=res.data
} catch (err) {
  console.log(error)
}

此外,您不需要为this.setState执行await,因为状态在每个生命周期/方法结束时都会发生更改,如果您要访问setState中的stateprops,则应使用如下回调:

this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

相关问题