首页 文章

ReactJS无法通过reducer更新prop

提问于
浏览 次
0

我创建了一个应用程序，它将客户详细信息显示为带有两个按钮编辑/删除的列表 . 但当我点击删除按钮我的减速机时，我看到客户列表是空的 . 我的Reducer JS文件

let customerReducer = function(customers = [], action) {
    switch (action.type) {
        case 'ADD_CUSTOMER':
        return [{
            name:action.name,
            address:action.address,
            id:0
          }, ...customers]
        case 'DELETE_CUSTOMER':
            {
                return customers.filter((customer) => {
                    return customer.id !== action.id
                })
            }
        default:
            return customers;
    }
}

export default customerReducer

当我在Delete_Customer案例中打印客户时，我将其视为空数组 . 因为我不知道我在哪里错过了客户道具/州减速器的链接我已将我的项目URL包含在github中找到我的项目URL

UPDATE:

在我的Client.js文件中，如果我发起我的道具和在我的APP.js，如果我通过道具而不是状态访问它工作正常 .

let initialState ={
  "customers": [
    {
      "id": 3,
      "name": "Client 1",
      "address": "WaterStree,Zambia,LO"
    },
    {
      "id": 14,
      "name": "Client ABC",
      "address": "ABC Street Hyderabad India 50050"
    }]
}

但我不想启动而是希望通过我的组件内的服务器调用加载 . 在这种情况下，我需要通过状态访问结果，如果我更改道具，它将不会更新

reactjs

1 回答

  • 0

    我认为你已经做好了一切，但你忘了使用州内的客户 . 在App.js中的 App 组件中，您将一个空数组作为客户传递给 CustomersView ：

    class App extends Component {
    render(){
        return (
            <span>
                <SideMenu headerText="React JS Application"/>
                <CustomersView customers={[]} actions={this.props.actions}/>
            </span>
        )
    }
}

    只需使用州内的客户：

    class App extends Component {
    render(){
        return (
            <span>
                <SideMenu headerText="React JS Application"/>
                <CustomersView customers={this.props.customers} actions={this.props.actions}/>
            </span>
        )
    }
}

function mapStateToProps(state){
    const { customers } = state

    return { customers }
}
function mapDispatchToProps(dispatch){
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
    回复于

相关问题