Question

我有一个调用我的API的搜索组件，我想将该数据传递到结果页面。相反，我收到此错误：

TypeError：无法读取未定义的属性“位置”

我已经尝试过在网上寻找解决方案，但这并不能解决我的问题。我在做什么错了？

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Results from './Results';
import Search from './Search';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />






      <Router>
      <div>

        <Switch>
        <Route exact path='/' component={Search} />
        <Route  path='/results' render={(props)=> (
          <Results {...props}  />)} />

        </Switch>
      </div>
    </Router>
    </header>

    </div>
  );
}

export default App;

搜索组件：

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';

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});


    }



    handleSubmit(event) {
        console.log("hit");
      event.preventDefault();


      fetch('http://localhost:8080/test/get/' + this.state.search,{
      method: 'GET',
      mode:'cors'}).then(response => response.json())
      .then(data => this.setState({data:data}));

      console.log(this.state.data);
      this.props.history.push({pathname:'/Results',
       state: {
           data:this.state.data }}); // <--- The page you want to redirect your user to.
    }


  render(){
    return (
     <div>
                <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>

    );
  }
  }

  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 {useLocation} from 'react-router-dom';
class  Results extends React.Component {


    constructor() {
        const location = useLocation;
      super();
      this.state = { 

                      data:this.props.location.state.data
                    };
    }

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


    }




  render(){
    return (
     <div>
              <h2>{console.log(this.state.data)}</h2>
              </div>

    );
  }
  }

  export default withRouter(Results)

我不知道自己在做什么错。

Answer 1

useLocation是一个钩子，它不过是一个函数，所以您应该这样使用它：

const location = useLocation();

但是您试图在基于类的组件中使用钩子，这是不正确的。

谈到实际问题，您的构造函数应如下所示：

constructor(props) {
  super(props);
  this.state = {
    data: props.location.state.data
  };
}

在任何组件中使用构造函数时，您都应该这样做。

使用history.push将状态从一个反应页面传递到另一反应页面

1 个答案: