结果组件未正确更新

Question

我有一个搜索组件，可用于搜索人。第一次单击搜索时，会弹出正确的结果。第二次我尝试搜索它不会更新结果组件。控制台输出正确的信息，但未在屏幕上更新。我真的很感谢这里的帮助，因为我不知道出了什么问题。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { withRouter } from 'react-router-dom';
import Results from './Results';
import { TableRow } from '@material-ui/core';
class  Search extends React.Component {


    constructor() {
      super();
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = { 
                      search:'',
                      data:[]
                    };
    }

    myChangeHandler = (event) => {
      let nam = event.target.name;
      let val = event.target.value;
      this.setState({[nam]: val});


    }



   async handleSubmit(event) {
        console.log("hit");
      event.preventDefault();
    var nameArray = this.state.search.split(' ');

     await fetch('http://localhost:8080/Users/get/'+this.state.search).then(response => response.json())
      .then(data => this.setState({data}));

      console.log(this.state.data);

    }


  render(){

    return (
     <div style={{paddingTop:"10%"}}>
         <div style={{textAlign:"center"}}>
         <div className="container">
                <TextField
                  variant="outlined"
                  required
                  fullWidth
                  name="search"
                  label="search"

                  id="search"

                  onChange={this.myChangeHandler}

                /> 
                <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                onClick={this.handleSubmit}

              >
                Search
              </Button>
              <h2>{this.state.search}</h2>
              </div>
              </div>
       <div>
       {this.state.data.map(data => <Results id={data.id} firstName={data.firstName} lastName={data.lastName} city={data.city} state={data.state} country={data.country} links={data.links} />) } 

           </div>      

              </div>

    );
  }
  }

  export default withRouter(Search)

结果部分

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import Search from './Search';
import location from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';


class  Results extends React.Component {


    constructor(props) {
      super(props);
      this.state = { 
                     id:this.props.id,
                      firstName:this.props.firstName,
                      lastName:this.props.lastName ,
                      city:this.props.city,
                      state:this.props.state,
                      country:this.props.country,
                      links:this.props.links
                    };
    }





  render(){
    return (
     <div>
         <Link
  to={{
    pathname: "/Details",

    state: {
                      id:this.state.id,
                      firstName:this.state.firstName,
                      lastName:this.state.lastName ,
                      city:this.state.city,
                      state:this.state.state,
                      country:this.state.country,
                      links:this.state.links

  }
  }}
>

         <div style={{textAlign:"center"}}>
         <div className="container">
<div className="box">
<Container>
  <Row >
    <Col >Name: {this.state.firstName} {this.state.lastName}</Col>
    <Col>City: {this.state.city}</Col>
  </Row>
  <Row>
    <Col >State: {this.state.state}</Col>
    <Col>Country: {this.state.country}</Col>


  </Row>
</Container>
             </div>
         </div>
              </div>
              </Link>
              </div>


    );
  }
  }

  export default withRouter(Results)

Answer 1

这可能是由于使handleSubmit函数异步而引起的。尝试卸下async/await，看看是否可以解决。 setState调用应该更新状态，并在收到更新后的数据后将其重新呈现，因此没有理由等待fetch调用返回。