我离完成我的应用程序的一个必要组件如此之近;但是,由于某种原因,对象生成后,它没有设置状态,尽管我对函数名的命令是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;
1条答案
按热度按时间55ooxyrt1#
您不能混合使用
async await
和then catch
中一个:此外,您不需要为
this.setState
执行await
,因为状态在每个生命周期/方法结束时都会发生更改,如果您要访问setState
中的state
或props
,则应使用如下回调: