為什么從本地 state 不要 go 更改為全局 state？

Question

待辦事項清單

當我嘗試編輯我創建的任務時，我看到了一些修改，但僅在本地 State 中。 當我查看全局 state 的數據時，沒有任何變化，數據與創建任務 object 后的數據相同。

值得注意的是，當案例 EDIT_TASK 起作用時， action.id = 來自 Input 的值，並且action.task = undefined

PS：把所有的組件代碼放在下面，可能哪里有錯誤。

PS：對不起ENG

組件代碼

import React from 'react'
import s from "./../../App.module.css";

class Item extends React.Component {
    state = {
        statusChange: false,
        task: this.props.task
    }

    activeStatusChange = () => {
        this.setState( {
            statusChange: true
           }
       );        
    }

    deActivateStatusChange = () => {
        this.setState( {
            statusChange: false
           }
       );
       this.props.editTask(this.props.task) 
    }

    onStatusChange = (e) => {
        this.setState({
            task: e.target.value
        }) 
    }


    render(){
        return (
            <div className={s.item}>
            <span onClick={this.props.editStatus} className={s.statusTask}>
                {this.props.status  ? <img src="https://img.icons8.com/doodle/48/000000/checkmark.png"/> 
                                    : <img src="https://img.icons8.com/emoji/48/000000/red-circle-emoji.png"/>}
            </span>

            { this.state.statusChange 
                ? <input  onChange={this.onStatusChange} autoFocus={true} onBlur={this.deActivateStatusChange} value={this.state.task} /> 
                : <span  className={this.props.status === true ? s.task : s.taskFalse} onClick={this.activeStatusChange}> {this.state.task} </span>}

            <span onClick={this.props.deleteTask} className={s.close}><img src="https://img.icons8.com/color/48/000000/close-window.png"/></span>

        </div>
        )
    }
}

export default Item;

減速機代碼

import React from 'react'
import shortid from 'shortid';

const ADD_TASK = 'ADD_TASK'
const EDIT_TASK = 'EDIT_TASK'

const initialState = {
    tasks: []
};



const mainReducer = (state = initialState, action) => {
    switch (action.type) {

        case ADD_TASK: {
            return {
                ...state,
                tasks: [{
                    id: shortid.generate(),
                    task: action.task,
                    status: false
                }, ...state.tasks]
            }
        }

        case EDIT_TASK: {
            return {
                ...state, 
                tasks: state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)
            }
        }

    default:
        return state
    }
}

//window.store.getState().mainReducer.tasks

export const addTask = task => ({type: 'ADD_TASK', task});
export const editTask = (id,newTask) => ({type: 'EDIT_TASK', id, newTask})


export default mainReducer;

父組件：

import React from "react";
import s from "./../../App.module.css";
import CurrentTasks from "../current-tasks";
import FilterButtonTasks from "../filter-button-tasks";
import ListTasks from "../tasks-list";

class SetForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
  }

  onInputChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handleSubmit = event => {
    event.preventDefault();

    if(this.state.text === '') {
      return undefined
    } 
    this.props.addTask(this.state.text)
    this.setState({
      text: ''
    })
  }

  filterTasks = (tasks, activeFilter) => {

    switch (activeFilter) {
      case 'done': {
        return tasks.filter(task => task.status);
      }
      case 'active': {
        return tasks.filter(task => !task.status)
      }
      default:
        return tasks;
    }
  }


  render() {

    const currentTasks = this.filterTasks(this.props.tasks, this.props.filter);

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <input name={"text"} onChange={this.onInputChange} value={this.state.text}placeholder={"Set your task"} className={s.setTask}/>
            <button onClick={this.handleSubmit} className={s.add}>ADD</button>
            <button onClick={this.props.removeAllTasks} className={s.clearAll}>Clear</button>
          </div> 
        </form>
        <CurrentTasks tasks={this.props.tasks}/>
        <ListTasks   currentTasks={currentTasks} editStatus={this.props.editStatus} deleteTask={this.props.deleteTask} editTask={this.props.editTask}/>
        <FilterButtonTasks  currentTasks={currentTasks} changeFilter={this.props.changeFilter} removeAllDone={this.props.removeAllDone}/> 
      </div>
    )
  }
}



export default SetForm;

多一個：

import React from 'react'
import Item from './SetItem/item'

const ListTasks = ({currentTasks,editStatus,deleteTask,editTask}) => {
    return (
        currentTasks.map(t => (<Item editStatus={() => editStatus(t.id)}
        deleteTask={() => deleteTask(t.id)}
        key={t.id} task={t.task} status={t.status} editTask={editTask}/>))
    )
}

export default ListTasks;

Answer 1

因為，您只更新本地 state onStatusChange state 不會在全局 state 中更新。 因此，在deActivateStatusChange上，您需要使用更新的 state 調用this.props.editTask ，即this.state.task

deActivateStatusChange = () => {
    this.setState({
      statusChange: false
    });
    this.props.editTask(this.state.task); // change is here
  };

問題出在您的EDIT_TASK減速器中：

改變

state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)

至

state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)

map將更新 object，而不是filter

代碼應該是：

case EDIT_TASK: {
            return {
                ...state, 
                tasks: state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)
            }
        }

此外，您似乎沒有將 id 和 newTask 傳遞給 editTask 操作：

const ListTasks = ({ currentTasks, editStatus, deleteTask, editTask }) => {
  return currentTasks.map(t => (
    <Item
      editStatus={() => editStatus(t.id)}
      deleteTask={() => deleteTask(t.id)}
      key={t.id}
      task={t.task}
      status={t.status}
      editTask={(newTask) => editTask(t.id, newTask)} // change current code to this
    />
  ));

};