UI 未显示来自 react redux 工具包应用程序中数组项的更改答案

【问题标题】：UI is not displaying changes from an array item in a react redux tool kit appUI 未显示来自 react redux 工具包应用程序中数组项的更改
【发布时间】：2021-07-24 22:14:55
【问题描述】：

我正在使用 react-redux 工具包开发一个 ToDo 应用程序。我可以成功读取/显示、插入和删除但不能更新，因为 UI 没有显示对 to-dos 所做的更改，即使我在 @ 中看到了更改987654321@.
我认为 <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>
    </>
  );
}

【问题讨论】：

你能显示你的选择器的代码吗？
我编辑帖子以包含初始状态和选择器代码。

标签： javascript reactjs redux redux-toolkit

【解决方案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>
    </>
  );
}

【讨论】：