我需要使用反应冗余实现删除选项

Question

我收到此错误： 连接组件主页时，合并 Props 参数的类型对象值无效。 已尝试通过从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

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

这是我找到的解决方案(我从您提供的链接运行了代码并且它有效(：

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

同样在您的情况下，您可以在加载时添加带有标志的回退，并在页面上调度数据时切换它