react.js - react使用redux管理状态，在修改数据时state不更新的问题

问题描述

问 题

最近在研究react和redux。前提，有一个用户列表，包含有用户名和电话号码，每条列表后都有一个编辑按钮，点击按钮可以编辑该用户信息。还有一个增加用户按钮，点击可以增加用户，目前的情况是点击新增用户时，通过redux的state管理，用户列表可以实时更新，可是在编辑保存后时，用户信息始终无法更新，必须手动更新绑定的用户对象。部分代码如下：

container:

 <div className="wrap">
     <h2>用户信息管理</h2>
     <ListUserForm users={users} editUser={editUser} selectUser={selectUser} selectAll={selectAll} filter={filter} deleteUser={deleteUser}/>
     <AddUserForm addUser={addUser} />
 </div>

component:

list:

    <div className="list-form">
    <ul className="header"><li><input type="checkbox" onClick={selectAll} ref="checkAll"/></li><li>姓名</li><li>电话</li><li></li></ul>
      {
        filterUsers.map((user,index) => <UserItem key={index} index={index} user={user} onMark={::this.handleMark} onSave={::this.handleSave}></UserItem>)
      }
    </div>

保存代码：

handleSave(id, name, mobile){

this.props.editUser({id:id, name:name,mobile:mobile});

}

item:

if(this.state.editing){
    return <ul key={index}><li><input type="checkbox" value={user.id} checked={user.checked} onChange={e=>this.handleMark(user.id, e)}/></li><li><input type="text" ref="name" value={this.state.name} onChange={(e)=>this.handleChange('name',e)}/></li><li><input type="text" ref="mobile" value={this.state.mobile} onChange={(e)=>this.handleChange('mobile',e)}/></li><li><span onClick={::this.handleSave}>保存</span></li></ul>
}else{
    return <ul key={index}><li><input type="checkbox" value={user.id} checked={user.checked} onChange={e=>this.handleMark(user.id, e)}/></li><li>{user.name}</li><li>{user.mobile}</li><li><span onClick={::this.handleEdit}>编辑</span></li></ul>
}

保存代码:

handleSave(){

this.setState({editing:false})
let id = this.props.user.id;
let name = this.refs.name.value;
let mobile = this.refs.mobile.value;        
this.props.onSave(id, name, mobile);
//this.props.user.name = name;必须手动更新此用户对象，否则dom无法自动更新
//this.props.user.mobile = mobile;

}

action:

export function editUser(user) {
    return {
       type: constant.EDIT_USER,
       user
    }
}

reducer:

case constant.EDIT_USER:
    return state.map(user =>
      user.id === action.id ?
        {...user, name: action.name, mobile:action.mobile} :
        user
    );

有清楚的同学请不吝指教，非常感谢！

解决方案

并没有修改state，是返回state在map后的一个copy。

问题解决了。是我自己犯了个小错误，我action传的是一个user对象，而不是单个的字段，所以reducer里写法应该改成如下：

case constant.EDIT_USER:
    return state.map(user =>
      user.id === action.user.id ?
        {...user, name: action.user.name, mobile:action.user.mobile} :
        user
    );

感谢各位的回答。

这篇关于react.js - react使用redux管理状态，在修改数据时state不更新的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！