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

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

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

  1. import React,{Component} from "react";
  2. import 'bootstrap/dist/css/bootstrap.min.css';
  3. import PropTypes from "prop-types";
  4. import axios from 'axios';
  5. import { default as AreaW} from "../WriteFolder/geographicMainComponents/areaMainComponent.jsx";
  6. import { default as CityW} from "../WriteFolder/geographicMainComponents/cityMainComponent.jsx";
  7. import { default as CountryW} from "../WriteFolder/geographicMainComponents/countryMainComponent.jsx";
  8. import { default as NeighborhoodW} from "../WriteFolder/geographicMainComponents/neighborhoodMainComponent.jsx";
  9. import { default as RegionW} from "../WriteFolder/geographicMainComponents/regionMainComponent.jsx";
  10. import { NavBar } from "../Navbar/navbar.jsx";
  11. import {MenuList} from "./MenuList.jsx";
  12. import GeographicLocationSearch from "./geographicSearchBar.jsx";
  13. import { NewObject } from "./newObject.jsx";
  14. class Menu extends React.Component{
  15. static propTypes = {
  16. suggestions: PropTypes.instanceOf(Array)
  17. };
  18. static defaultProps = {
  19. suggestions: []
  20. };
  21. constructor(props) {
  22. super(props);
  23. // Don't call this.setState({) here!
  24. this.state = { name:null,type:"",supra:{},newObject:"",itemName:"",options:[],searchBar:[{locations:["country","region","area","city","neighborhood"]}]};
  25. this.handleNavBar=this.handleNavBar.bind(this);
  26. this.handleSearchBar=this.handleSearchBar.bind(this);
  27. }
  28. //to search by location.
  29. async componentDidMount(){
  30. //set possible options
  31. let name=this.state.name;
  32. let category='country';
  33. await this.setState({type:'country'});
  34. if(name){
  35. await axios.get('http://localhost:8080/'+category+'/'+name)
  36. .then(res => {
  37. this.setState({options:res});
  38. }).catch(
  39. function (error) {
  40. });
  41. let newSupra=this.state.options[0];
  42. await this.setState({supra:newSupra});
  43. let ofSupra=this.state.supra;
  44. let children=[];
  45. ofSupra.map((e)=>{
  46. children.push(e);
  47. })
  48. await this.setState({options:children});
  49. }
  50. else{
  51. let list=[];
  52. await axios.get('http://localhost:8080/'+category)
  53. .then(res => {
  54. list.push(res);
  55. }).catch(
  56. function (error) {
  57. let x=error;
  58. });
  59. await this.setState({options:list[0].data});
  60. }
  61. //turn to a list of options
  62. }
  63. //get search parameters
  64. async handleNavBar(value){
  65. let list=[];
  66. await axios.get('http://localhost:8080/'+value)
  67. .then(res => {
  68. list.push(res);
  69. }).catch(
  70. function (error) {
  71. let x=error;
  72. });
  73. await this.setState({options:list[0].data});
  74. await this.setState({kind:value});
  75. }
  76. //this is the function.just assume there is a valid object cause there is.
  77. async handleSearchBar(value){
  78. await axios.get(
  79. 'http://localhost:8080/'+value.category+'/getById/'+value.id)
  80. .then(res => { this.setState({supra:Object(res.data)}, () => {
  81. console.log(this.state.supra)});}).catch(
  82. function (error) {console.log(error)
  83. }
  84. );
  85. }
  86. render() {
  87. return(
  88. <div>
  89. <div>
  90. <NavBar content={this.state.searchBar} handleNavBar={this.handleNavBar} />
  91. </div>
  92. <div>
  93. { /*this is the call */}
  94. <GeographicLocationSearch handleSearchBar={this.handleSearchBar}/>
  95. </div>
  96. <div>
  97. <NewObject category={this.state.type} key={this.state.supra}/>
  98. </div>
  99. <div>
  100. <MenuList Items={this.state.options} kind={this.state.type}/>
  101. </div>
  102. </div>
  103. );
  104. };
  105. }
  106. export default Menu;
55ooxyrt

55ooxyrt1#

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

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

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

  1. this.setState(function(state, props) {
  2. return {
  3. counter: state.counter + props.increment
  4. };
  5. });

相关问题