类组件到功能组件

Question

TypeError：无法使用 React 中的下拉选择读取未定义的属性（读取“推送”）

2021-12-03

3528

javascript reactjs

抱歉，这是一个愚蠢的问题，但我正在尝试提高我的反应能力并构建一个简单的网站，其中包含一个选择下拉菜单，选择后应路由到 URL。但是我收到了这个错误。或者如果有更好的方法使用钩子来做到这一点，我洗耳恭听 :)。谢谢

×
TypeError: Cannot read properties of undefined (reading 'push')
DropDown.onChange
src/components/Dropdown.js:10
   7 | 
   8 | class DropDown extends Component {
   9 |   onChange = (e) => {
> 10 |     this.props.history.push(`/${e.target.value}`);
  11 |   }
  12 | 
  13 |   render() {

以下是我的代码

   import React, { Component } from 'react'
   import '../App.css'
   import ReactDOM from 'react-dom';
   import { BrowserRouter, Route, withRouter } from "react-router-dom";

   class DropDown extends Component {
   onChange = (e) => {
    this.props.history.push(`/${e.target.value}`);
  }

   render() {
     return (
      <div>
        <label htmlFor="pests">Choose a pest:</label>
        <select onChange={this.onChange}>
          <option value="ants">Ants</option>
          <option value="wasps">Wasps</option>
        </select>
      </div>
    )
  }
}

export default DropDown;

这是我的路由器代码

function App() {
  return (
    <div className="main">
      {/* <Navbar/> */}
      <Header />
      <NavbarBasic />
      <Dropdown />
      {/* These are the main routes and subpages */}
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/pests-we-treat' element={<Pests />} />
        <Route path='/services' element={<Services />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/ants' element={<Ants />} />
        <Route path='/wasps' element={<Wasps />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 1

类组件到功能组件

将您的类组件转换为功能组件并导入 useHistory ，如下所示：

import { useHistory } from "react-router-dom";
...
let history = useHistory();
history.push(`/${e.target.value}`);

另一种方法，使用 JS

    import React, { Component } from 'react';
    // import { BrowserRouter, Route, withRouter } from "react-router-dom";

    class DropDown extends Component {

      onChange = (e) => {
        // this.props.history.push(`/${e.target.value}`);
        window.location.href = `/${e.target.value}`;
      }

      render() {
        return (
            <div>
              <label htmlFor="pests">Choose a pest:</label>
              <select onChange={this.onChange}>
                <option value="ants">Ants</option>
                <option value="wasps">Wasps</option>
              </select>
            </div>
        );
      }
    }

    export default DropDown;

另一种混合类组件和 React Hooks 的方法

dropdownRouter.tsx

    import { createBrowserHistory } from 'history';

    export default function DropdownPush(path: string) {
      let history = createBrowserHistory();
      history.push(`/${path}`);
    }

或

    import { useHistory } from 'react-router-dom';

    export default function DropdownPush(path: string) {
       const history = useHistory();
       history.push(`/${path}`);
    }

或者，如果您使用的是 v6 react-router-dom，则 useHistory() 已被 useNavigate() 替换

    import { useNavigate } from "react-router-dom";

    export default function DropdownPush(path: string) {
      const navigate = useNavigate();
      navigate(`/${path}`);
    }

dropdown.tsx

    import React, { Component } from 'react';
    import DropdownPush from './dropdownRouter';

    class DropDown extends Component {
      constructor(props) {
        super(props);
      }

      onChange = (e) => {
        // this.props.history.push(`/${e.target.value}`);
        
        // JS redirect method
        // window.location.href = `/${e.target.value}`;
        
        // Using Hook
        DropdownPush(e.target.value);
      };

      render() {
        return (
          <div>
            <label htmlFor="pests">Choose a pest: </label>
            <select onChange={this.onChange}>
              <option value="ants">Ants</option>
              <option value="wasps">Wasps</option>
            </select>
          </div>
        );
      }
    }

    export default DropDown;

Answer 2

我希望您将 Dropdown 组件包装在 withRouter 高阶组件中。这通常会在导出时发生：

import { withRouter } from "react-router";

class DropDown extends Component {
  // ...
}

export default withRouter(Dropdown);

访问 history 的另一种方法是使用 useHistory 钩子，文档中包含了如何使用它的一个很好的例子。