javascript - 合并两个文件时出现错误 "dispatch is not a function"[ReactJS]

Question

我正在使用reactJS创建一个待办事项列表应用程序。如果我在两个单独的文件中编写两个不同的逻辑，它工作得很好，但是在组合这两个文件时，它会给出错误。

RenderRemaining.js 文件:

import React from 'react';
import { connect } from 'react-redux';
import store from '../store/store';
import RenderRemainingData from './RenderRemainingData';

const RenderRemaining = (props) => {
    return (
        <div>
            <h2>Tasks: </h2>
            <hr />
            {props.list.map((detail) => {
                return <RenderRemainingData key={detail.id} {...detail} />
            })}
        </div>
    );
}

const mapStateToProps = (state) => {
    return {
        list: state.todoReducer
    };
}

export default connect(mapStateToProps)(RenderRemaining);

RenderRemainingData.js 文件:

import React from 'react';
import { connect } from 'react-redux';
import removeTodo from '../actions/removeTodo';

const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => {
    if (!isCompleted) {
        return (
            <div key={id}>
                <h4>{todo}
                    <span className="float-right">
                        <a href="#" title="Remove" onClick={() => {
                            dispatch(removeTodo({todo, description, id}));
                        }}><i className="fas fa-times"></i></a>
                    </span>
                </h4>
                <p>{description}</p>
            </div>
        );
    }
    return false;
}

export default connect()(RenderRemainingData);

现在上面的代码可以正常工作了。

在RenderRemaining.js中将以上两个文件合并为一个js文件并删除RenderRemainingData.js文件后。

RenderRemaining.js 文件:(合并后)

import React from 'react';
import { connect } from 'react-redux';
import store from '../store/store';
import removeTodo from '../actions/removeTodo';

const RenderRemainingData = ({ dispatch, todo, id, description, isCompleted }) => {
    if (!isCompleted) {
        return (
            <div key={id}>
                <h4>{todo}
                    <span className="float-right">
                        <a href="#" title="Remove" onClick={() => {
                            dispatch(removeTodo({todo, description, id}));
                        }}><i className="fas fa-times"></i></a>
                    </span>
                </h4>
                <p>{description}</p>
            </div>
        );
    }
    return false;
}

const RenderRemaining = (props) => {
    return (
        <div>
            <h2>Tasks: </h2>
            <hr />
            {props.list.map((detail) => {
                return <RenderRemainingData key={detail.id} {...detail} />
            })}
        </div>
    );
}

const mapStateToProps = (state) => {
    return {
        list: state.todoReducer
    };
}

connect()(RenderRemainingData);
export default connect(mapStateToProps)(RenderRemaining);

现在，当 onClick 事件发生时，它会给出错误，因为控制台中的 dispatch 不是函数。

我不知道为什么会发生这种情况。

Answer 1

这是因为当您在 RenderRemaining 内渲染 RenderRemainingData 组件时，您没有传递 dispatch，但如果是单独的文件，组件将从 connect 接收调度。

可能的解决方案:

1- 将 props 中的调度传递给 RenderRemainingData 组件:

return <RenderRemainingData key={detail.id} {...detail} dispatch={props.dispatch} />

并删除这一行:

connect()(RenderRemainingData);

2-另一种可能的解决方案是:

使用包装器组件，而不是渲染 RenderRemainingData 渲染该包装器组件。像这样:

const WrapperRenderRemainingData = connect()(RenderRemainingData);

return <WrapperRenderRemainingData key={detail.id} {...detail} />