还原/react。您必须将一个组件传递给 connect 返回的函数。而是收到未定义

IT技术 reactjs redux
2021-05-15 20:53:08

我看到这个话题你必须将一个组件传递给connect返回的函数。而是收到 undefined，但这与我的情况无关。

所以，我无法理解我的演示文稿/容器连接有什么问题？

我将它们彼此连接起来，但出现错误： You must pass a component to the function returned by connect. Instead received undefined

/* 零件 */ 

import React from 'react';
import AddTodo from '../../Actions/AddTodo'
import TodoFormAdd from '../../Containers/TodoFormAdd'

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();

        document.querySelector('input').input.value = '';   
        TodoFormAdd(this.props.store, this.input.value);
    }

    render() {
        return (
            <form id="tp" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your text" />
                <button type="submit">Add todos</button>
            </form>
        );  
    }
}

export default TodoForm;

/* 容器 */

import { connect } from 'react-redux';
import TodoForm from '../Components/TodoForm/TodoForm'
import AddTodo from '../Actions/AddTodo'

let TodoFormAdd = (store, input) => store.dispatch(AddTodo(input));

export default connect(TodoFormAdd)(TodoForm);
3个回答

解决了：

问题出在一次运行中更接近地调用这两个代码。

所以链是下一个：

  1. 我们启动TodoForm也尝试导入的组件TodoFormAdd；
  2. TodoFormAdd 还没有让参数起作用，开始开始崩溃。
  3. 然后TodoForm无法自己完成编译并崩溃。

而它。所以，我只是删除import TodoFormAdd在TodoForm和一切好了。

感谢大家的帮助！

import TodoForm from '../Components/TodoForm/TodoForm'.

1）是否TodoForm定义？，console.log 2）是TodoForm组件吗？查看文件结构并查看文件，文件是否存在？该文件中是否存在组件？

来自react-reduxAPI 文档：

连接（[mapStateToProps]，[mapDispatchToProps]，[mergeProps]，[options]）

connect(..)将mapStateToProps函数作为它的第一个参数，并且您TodoFormAdd似乎不是一个有效的 mapStateToProps，它应该将store状态作为其输入，并返回一个普通对象

的结果mapStateToProps必须是一个普通对象，这将是一个普通对象，它将被合并到组件的props中

我建议多次阅读 redux文档及其示例，直到您很好地理解这些概念。

我不会为您编写整个代码，但在您的情况下，TodoFormAdd 似乎是多余的。

只需使TodoForm组件成为容器（即“连接”）组件，您就dispatch(..)可以免费获得通过props！

它看起来类似于：

class TodoForm extends React.Component {
    ...

    handleSubmit(e) {
        const { dispatch } = this.props;
        e.preventDefault();

        document.querySelector('input').input.value = '';   
        dispatch(AddTodo(input));
    }

    ...
}

function mapStateToProps(state) {
  return {
  // your mapStateToProps return object
  };
}

export default connect(mapStateToProps)(TodoForm);

其它你可能感兴趣的问题
上一篇React Router 和任意查询参数：页面在加载时意外刷新？ 下一篇React 无法识别 DOM 元素上的“activeKey”（和“activeHref”）props