Мне нужно реализовать опцию удаления, используя реагировать на редукцию

Question

Я получаю эту ошибку: Неверное значение типа объекта для аргумента mergeProps при подключении компонента Home.Попытался разрешить, удалив fetchData из connect (), но не смог разрешить.Можете ли вы помочь мне с этим.Вот ссылка на мой код.

Домашний компонент:

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

Я просто снова посмотрел на ваш код и обнаружил проблему.Проблема заключается в способе вызова некоторых функций.Это включает функцию 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);

Answer 2

Подумайте, в спецификации, 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

Также в вашемВ этом случае вы можете добавить запасной вариант с флагом загрузки и переключать его, когда данные будут отправлены на странице

.