组件更新但状态不更新 redux 工具包

Question

我有一个待办事项列表应用程序，我将待办事项列表存储在一个名为 list 的状态中，它是一个数组。当我添加一个列表时，组件会重新渲染并更新 UI，但是当我在调用 reducer 后控制台记录列表时，列表不会更新。这是控制台。列表前的对象是警告信息

这是我的回购链接：https://github.com/yustinayasin/tugas-react/tree/day16/day16

这是我在组件中添加列表的代码：

function App() {
  const [kegiatan, setKegiatan] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [editID, setEditID] = useState(null);
  const list = useSelector((state) => state.list);
  const alert = useSelector((state) => state.alert);
  const dispatch = useDispatch();
 
  const handleSubmit = (e) => {
    e.preventDefault();
    if(!kegiatan) {
      dispatch(setAlert({show: true, msg: 'Masukkan kegiatan terlebih dahulu', type: 'danger'}))
    } else if (kegiatan && isEditing) {
      dispatch(editToList({title: kegiatan, id: editID}));
      setKegiatan('');
      setEditID(null);
      setIsEditing(false);
      dispatch(setAlert({show: true, msg: 'Kegiatan berhasil diubah', type: 'success'}));
    } else {
      console.log('masuk');
      dispatch(addToList({title: kegiatan}));
      dispatch(setAlert({show: true, msg: 'Kegiatan ditambahkan ke dalam list', type: 'success'}));
      console.log(list);
      setKegiatan('');
    }
  }

  const clearList = () => {
    dispatch(setAlert({show: true, msg: 'List kegiatan kosong', type: 'danger'}));
    dispatch(clearAllList());

  }

  const removeItem = (id) => {
    dispatch(setAlert({show: true, msg: 'Kegiatan berhasil dihapus', type: 'danger'}));
    dispatch(deleteListItem(), {id: id});
  }

  const editItem = (id) => {
    const specificItem = list.find((item) => item.id === id);
    setIsEditing(true);
    setEditID(id);
    setKegiatan(specificItem.title);
  }

  const completeItem = (id) => {
    dispatch(completeItemList({id: id}));
  }

  return (
    <section className="section-center">
      <Navbar/>
      <form className="kegiatan-form" onSubmit={handleSubmit}>
        {alert.show && <Alert />}
        <h3>Daftar Kegiatan</h3>
        <div className="form-control">
          <input 
            type="text" 
            className="kegiatan" 
            placeholder='contoh: beli beras' 
            value={kegiatan} 
            onChange={(e) => setKegiatan(e.target.value)}
            />
          <button className="submit-btn" type="submit">
            {isEditing ? 'edit' : 'submit'}
          </button>
        </div>
      </form>
      {list.length > 0 && 
        <div className="kegiatan-container">
          <List completeItem={completeItem} removeItem={removeItem} editItem={editItem}/>
          <button className="clear-btn" onClick={clearList}>
            hapus semua kegiatan
          </button>
        </div>
      }
    </section>
  );
}

export default App

这是我的减速器代码

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  list: []
}

export const listSlice = createSlice({
  name: 'list',
  initialState,
  reducers: {
    addToList: (state, action) => {
        console.log(action.payload.title);
        return [...state.list, {id: new Date().getTime().toString(), title: action.payload.title, complete: false}];
    },
    editToList: (state, action) => {
        return [...state.list, state.list.map((item) => {
            if(item.id === action.payload['id']) {
                return {...item, title: action.payload['kegiatan']};
            }
            return item;
        })]
    },
    deleteListItem: (state, action) => {
        return state.list.filter((item) => item.id !== action.payload.id);
    },
    clearAllList: () => {
        return initialState;
    },
    completeItemList: (state, action) => {
        return [...state.list, state['list'].map((item) => {
            if(item.id === action.payload['id']) {
                return {...item, complete: !state.list.complete};
            }
            return item;
        })]
    }
  },
})


export const { completeItemList, editToList, addToList, deleteListItem, clearAllList} = listSlice.actions

export default listSlice.reducer

Answer 1

尝试在仅传播状态内的列表项之前传播整个状态。而不是：

return [...state.list, {id: new Date().getTime().toString(), title: action.payload.title, complete: false}];,

做：

return{...state, [...state.list, {id: new Date().getTime().toString(), title: action.payload.title, complete: false}];}