Question

我收到此错误：连接组件Home时，mergeProps参数的类型object的值无效。试图通过从connect（）中删除fetchData来解决问题，但无法解决。你能帮我这个忙吗？这是我的代码的链接。

家庭组件：

import React from 'react';
import { connect } from 'react-redux';


class Home extends React.Component {
    handleClick = () => {
        console.log('ppp');
        this.props.deleteVehicle(this.props.home.id);
    }
    componentWillMount() {
        this.props.fetchData();
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this.props.onUnload();
    }

    render() {
        //console.log(this.props);
        const vehiclesItems = this.props.home.map((vehicle, index) => (
            <tbody key={}>

            </tbody>
            ))
        return (
            <div>
            <table>
                <thead>
                    <tr className="table-heading">
                        <th>Make</th><th>Model</th><th>Year</th><th></th>
                    </tr>
                </thead>



            </table>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    home: state.home.items,
});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps, { fetchData })(Home);

Answer 1

请考虑一下，在规范中，mergeProps是一个函数，它接收一些参数，例如：

mergeProps(mapStateToPropsValues, mapDispatchToPropsActions, yourProps) => //can return object with redux props and merged with your own ones

有关它的附加信息：https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4

同样，在您的情况下，您可以添加带有标志的后备广告，并在数据将在页面上分发时进行切换

Answer 2

我只是再次查看了您的代码，发现了问题。问题在于调用某些函数的方式。这包括fetchData函数和handleClick函数。

这是我找到的解决方案（我从您提供的链接中运行了代码，并且可以正常工作）：

import React from 'react';
import { connect } from 'react-redux';
import { REMOVE_VEHICLE } from '../../constants/actionTypes';
import VehicleList from '../VehicleList';
import { fetchData } from '../../constants/postActions';

class Home extends React.Component {

    handleClick = (e,id) => {
        console.log('ppp');
        e.preventDefault();
        this.props.deleteVehicle(id);
    };

    componentDidMount() {
        console.log('mounted');
        this.props.fetchData();
    }

    render() {
        //console.log(this.props);
        const vehiclesItems = this.props.home.map((vehicle, index) => (
            <tbody key={vehicle.id}>
                <tr key={vehicle.id}>
                    <td> {vehicle.model} </td>
                    <td> {vehicle.make} </td>
                    <td> {vehicle.year} </td>
                    <td> <button onClick={(e)=>this.handleClick(e,vehicle.id)}>Delete</button> </td>
                </tr>
            </tbody>
            ));
        return (
            <div>
            <table>
                <thead>
                    <tr className="table-heading">
                        <th>Make</th><th>Model</th><th>Year</th><th></th>
                    </tr>
                </thead>

                    {vehiclesItems}

            </table>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    home: state.home.items,
});

const mapDispatchToProps = dispatch => ({
    deleteVehicle: id => dispatch({ type: 'REMOVE_VEHICLE', id: id}),
    fetchData: ()=> dispatch(fetchData())
});

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

我需要使用react redux实现delete选项

2 个答案: