UI 未显示 React redux 工具包应用程序中数组项的更改

Question

我正在使用 react-redux toolkit.I 开发一个 ToDo 应用程序可以 read/display，插入和删除成功但不更新，因为 UI 没有显示对 to- DOS，即使我看到 Redux ToolsDev.
中的变化我认为 <ToDoList/> 负责使用来自状态的数组显示所有待办事项的组件不会重新渲染，因为没有检测到数组本身的变化，因为数组项 (todo) 是唯一更新的。
代码：
toDoSlice

const initialState = {
  toDos: [
    { id: nanoid(), text: "First ToDo" },
    { id: nanoid(), text: "Second ToDo" },
  ],
  text: "",
};
const toDoSlice = createSlice({
  name: "toDo",
  initialState,
  reducers: {
    saveChanges: (state, action) => {
      state.toDos[action.payload].text = state.text;
      //  updating other state values...
    },
  },
});
export const selectToDos = (state) => state.todo.toDos;
export const selectText = (state) => state.todo.text;
export const selectEditStatus = (state) => state.todo.editStatus;
export const { saveChanges } = toDoSlice.actions;
export default toDoSlice.reducer;

<ToDoList/> 显示数组中的待办事项

export default function ToDoList({ toDos }) {
  return (
    <form className="p-3" style={{ backgroundColor: "#F0E8E5" }}>
      <h2>List</h2>
      {toDos.map((todo) => (
        <ToDo key={todo.id} {...todo} />
      ))}
    </form>
  );
}

<ToDo/> 使用 id 和文本显示待办事项

export default function ToDo({ id, text }) {
  const dispatch = useDispatch();
  return (
    <>
      <div className="input-group mt-3">
        <input type="text" className="form-control" defaultValue={text} />
        <button
          type="button"
          className="btn btn-warning"
          onClick={() => dispatch(editToDo(id))}
        >
          Update
        </button>
        <button
          type="button"
          className="btn btn-danger"
          onClick={() => dispatch(deleteTodo(id))}
        >
          Delete
        </button>
      </div>
    </>
  );
}

Answer 1

如果您在开发工具中看到组件更新但没有重新渲染，那么问题可能出在商店连接到 ToDoList 组件的方式上。

Here's a StackBlitz showing the code all wired together - 我创建了一个简单的“主机”组件，它使用您的 selectToDos 选择器将商店连接到 ToDoList -

function ToDoListHost() {
  const toDos = useSelector(selectToDos);

  return (
    <ToDoList toDos={toDos} />
  );
}

我还稍微更改了 ToDo 组件，以便通过在输入字段中连接 onChange 事件，将每个更新立即传播到商店：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { editToDo, deleteToDo } from './store';

export default function ToDo({ id, text }) {
  const dispatch = useDispatch();

  const handleChange = event => 
    dispatch(editToDo({ id, text: event.target.value }));

  return (
    <>
      <div className="input-group mt-3">
        <input 
          type="text"
          className="form-control"
          value={text}
          onChange={handleChange} 
        />
        <button
          type="button"
          className="btn btn-danger"
          onClick={() => dispatch(deleteToDo(id))}
        >
          Delete
        </button>
      </div>
    </>
  );
}

UI 未显示 React redux 工具包应用程序中数组项的更改

UI is not displaying changes from an array item in a react redux tool kit app

javascript

reactjs

redux

redux-toolkit