为什么显示错误[您必须将组件传递给连接返回的函数。而是在反应 redux 中收到 undefined]

Question

我想将状态和函数传递给组件，以便实时更改表单 react-redux 。

我从导入/导出语法中搜索了这个错误和大部分这个错误。

但我找不到问题所在。请您校对。

当我在 Post.js 中删除 import Dispatch from '../containers/dispatch' 行并在 Post.js 中显示错误 Cannot read property 'props' of undefined 所以我添加了这一行。并显示标题错误。

这是错误的详细信息

app.js:65400 Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined
    at wrapWithConnect (app.js:65400)
    at Module../resources/js/containers/dispatch.js (app.js:73436)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/components/Post.js (app.js:73179)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/components/App.js (app.js:73072)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/components/Index.js (app.js:73120)
    at __webpack_require__ (app.js:20)
    at Object../resources/js/app.js (app.js:72981)

↓这是表单组件。（Post.js）

import React, { useState, useEffect } from 'react';
import { property } from 'lodash';
import dispatch from '../containers/dispatch'

export default class Post extends React.Component 
{
   render(){

     return(
        <div className="show">
          <div>
            <form className="main_form" action="" method="post">
              <p>
                NAME:
                  <input 
                    type="text"
                    name="name" 
                    placeholder="Name"
                    value={this.props.name}
                    onChange={() => this.props.changeName()}
                  ></input>
              </p>
              
              <p>
                Message:
                 <textarea 
                   spellCheck="false" 
                   name="message" 
                   id="" 
                   cols="30" 
                   rows="10"
                   value={this.props.message}
                   onChange={() => this.props.changeMessage()}
                  ></textarea>
              </p>

              <p>
                Image:
                  <input 
                    type="file"
                    name="path"
                    value={this.props.value}
                    onChange={() => this.props.changeFile()}
                  ></input>
              </p>
            
              <p>
                <button type="submit">Post!</button>
              </p>
            </form>
          </div>
}

↓connect方法的状态和函数。(dispatch.js)

import { connect } from 'react-redux'
import { changeName, changeMessage, changeFile } from '../actions/action'
import  Post from '../components/Post'

const mapStateToProps = state =>
{
    const { name, message, file } = state
    return { name, message, file }
}

const mapDispatchToProps = dispatch => 
{
   return {
       changeName:    (e) => { dispatch(changeName(e)) },
       changeMessage: (e) => { dispatch(changeMessage(e)) },
       changeFile:    (e) => { dispatch(changeFile(e)) }
   }
}

export default connect(mapStateToProps, mapDispatchToProps)(Post)

↓改变状态函数(action.js)

export { changeName, changeMessage, changeFile};

 function changeName(e)
{
  return {
      type: 'NAME',
      text: e.target.value
  }
}

 function changeMessage(e)
{
  return {
      type: 'MESSAGE',
      text: e.target.value
  }
}

 function changeFile(e)
{
  return {
      type: 'FILE',
      text: e.target.files
  }
}

App.js

import   React           from 'react';
import   ReactDOM        from 'react-dom';
import { createStore }   from 'redux';
import { Provider }      from 'react-redux';
import   reducer         from '../reducers/reducer';

import NavBar from './NavBar'
import About  from './About'
import User   from './User'
import Top    from './Top'
import Post   from './Post'



import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

let store = createStore(reducer);

export default function App() {
    
    return (
    <Provider store={store}>
    <Router>
        <div>
            <NavBar />
            <Route exact path = "/"        component={Top}   />
            <Route path       = "/about"   component={About} />
            <Route path       = "/user"    component={User}  />
            <Route path       = "/post"    component={Post}  />
        </div>
    </Router>
    </Provider>
    )
}

index.js

import   React     from 'react';
import   ReactDOM  from 'react-dom';
import   App       from './App' 

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

Answer 1

Post.js 和 dispatch.js 正在相互导入，这是错误的。

在Post.js，

你不需要导入import Dispatch from '../containers/dispatch'

在App.js，

import Post   from './Post // should be path from containers/dispatch.js

Post 的路径应参考containers/dispatch.js。

编辑：

Post() 是functional component。所以，你不能使用this.props 引用道具

function Post(props) { // get props from here.
//...
//  e.g. props.changeMessage or props.name

}

Answer 2

像这样重构你的 Post.js 组件

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { property } from "lodash";
import { changeName, changeMessage, changeFile } from '../actions/action'
import Dispatch from "../containers/dispatch";

const Post = (props) => {
  const {
    name,
    value,
    changeName,
    changeName,
    changeMessage,
    changeFile,
  } = props;
  return (
    <div className="show">
      <div>
        <form className="main_form" action="" method="post">
          <p>
            NAME:
            <input
              type="text"
              name="name"
              placeholder="Name"
              value={name}
              onChange={() => changeName()}
            ></input>
          </p>

          <p>
            Message:
            <textarea
              spellCheck="false"
              name="message"
              id=""
              cols="30"
              rows="10"
              value={message}
              onChange={() => changeMessage()}
            ></textarea>
          </p>

          <p>
            Image:
            <input
              type="file"
              name="path"
              value={value}
              onChange={() => changeFile()}
            ></input>
          </p>

          <p>
            <button type="submit">Post!</button>
          </p>
        </form>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => {
  const { name, message, file } = state;
  return { name, message, file };
};

const mapDispatchToProps = (dispatch) => {
  return {
    changeName: (e) => {
      dispatch(changeName(e));
    },
    changeMessage: (e) => {
      dispatch(changeMessage(e));
    },
    changeFile: (e) => {
      dispatch(changeFile(e));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Post);