javascript - React-redux 状态更新，但不影响 View

Question

我正在通过尝试制作一个待办事项应用来学习 React Redux。我的状态是这样的

[
  {
    taskName:"ABS",
    status: true
  },
  {
    taskName:"XYZ",
    status: false
  }
]

基本上，每个任务都是一个对象。我想在每次按下按钮时切换特定任务的状态(它在红色和绿色之间改变颜色)，所以我设计我的 reducer 如下:

尝试 1:

var stateClone = [...state];
stateClone[action.index].status = !stateClone[action.index].status;
return stateClone;

尝试 2:

var cloneTask = {...state[action.index]}
cloneTask.status = !cloneTask.status;
state[action.index] = cloneTask
localStorage.setItem('tasks', JSON.stringify(state));
return [...state];

据我了解，两者都是纯函数。两者都返回正确的状态，但是只有尝试 2 成功更新了 View ，尝试 1 更新了状态但没有正确更新 View 。

有人帮帮我。谢谢!

**

import React, { Component } from 'react';
import TaskItem from './TaskItem';
import { connect } from 'react-redux'
class TaskList extends Component {
    constructor(props){
        super(props);
        this.state = {
            filterName: '',
            filterStatus: -1
        };
    }
    onChange = (event)=>{
        var target = event.target;
        var name = target.name;
        var value = target.value;
        console.log(name)
        this.props.onFilter(name==='filterName'?value:this.state.filterName, 
                            name==='filterStatus'?value:this.state.filterStatus);
        this.setState({
            [name]:value
        });
    }
    render() {
        // console.log(this.props);
        var { tasks } = this.props;
        var { filterName, filterStatus } = this.state;
        var elemTask = tasks.map((item, index)=>{
            return <TaskItem 
                        key={index+1} 
                        item={item} 
                        index={index} 
                        deleteTask={this.props.deleteTask}
                        editTask = {this.props.editTask}
                    />
        }); 
        return (
            <table className="table table-bordered table-hover mt-15">
                <thead>
                    <tr>
                        <th className="text-center">STT</th>
                        <th className="text-center">Task</th>
                        <th className="text-center">Status</th>
                        <th className="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td>
                            <input 
                                type="text"
                                className="form-control"
                                name="filterName"
                                value={filterName}
                                onChange={this.onChange}
                            />
                        </td>
                        <td>
                            <select name="filterStatus" 
                                    value={filterStatus} 
                                    className="form-control"
                                    onChange={this.onChange}>
                                <option value={-1}>All</option>
                                <option value={0}>OnHold</option>
                                <option value={1}>Active</option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    {elemTask}
                    
                </tbody>
            </table>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        tasks: state.tasks
    };
}
export default connect(mapStateToProps, null)(TaskList);

**

应该从存储中获取状态的我的 react 文件

import * as types from '../constants/ActionTypes';

var data = JSON.parse(localStorage.getItem('tasks'));
var initialState = data? data: [];

var myReducer = (state=initialState, action) => {
	switch(action.type){
		case types.LIST_ALL:
			return state;

		case types.ADD_TASK:
			var newTask = {
				id: Math.random(),
				name: action.task.name	,
				status: action.task.status==='true'
			}
			state.push(newTask);
			localStorage.setItem('tasks', JSON.stringify(state));
			return [...state];

		case types.UPDATE_STATUS:
			// var stateClone = [...state];
			// stateClone[action.index].status = !stateClone[action.index].status;
			// console.log(stateClone);
			// return stateClone;
			
			var cloneTask = {...state[action.index]}
			cloneTask.status = !cloneTask.status;
			state[action.index] = cloneTask
			localStorage.setItem('tasks', JSON.stringify(state));
			console.log(state);
			return [...state];
		default: return state
	}
};

export default myReducer; 

Answer 1

在这两种情况下，您都改变状态。

首先，您复制对象，然后更改其中一个； React 看到相同的对象并认为没有任何变化。

在第二个中，您创建了一个新对象，但将其放置在现有数组中。 React 仍然看到相同的数组，并认为没有任何改变。

您需要返回一个新数组，并为已更改的数组返回一个新对象。

一种方法是将您的两次尝试结合起来:

var stateClone = [...state];
var cloneTask = {...state[action.index]};
cloneTask.status = !cloneTask.status;
stateClone[action.index] = cloneTask;
return stateClone;

应该可以。