时间戳

首页 > 解决方案 > 为什么在 React useReducer 简单的 Todo 应用程序中我得到“一个组件正在改变一个未定义类型的不受控制的输入来控制..”？

javascript - 为什么在 React useReducer 简单的 Todo 应用程序中我得到“一个组件正在改变一个未定义类型的不受控制的输入来控制..”？

问题描述

组件正在更改类型为 undefined 的非受控输入以进行控制。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素

function reducer(state, action) {
  switch (action.type) {
    case "add":
      return {
        todos: [...state.todos, { text: action.text, completed: false }]
      };
    case "toggle":
      return {
        todos: state.todos.map((t, idx) =>
          idx === action.idx ? { ...t, completed: !t.completed } : t
        )
      };
    default:
      return state;

const App = () => {
  const [{ todos, todoCount }, dispatch] = useReducer(reducer, {
    todos: []
  });
  const [text, setText] = useState();

  return (
   <div>
     {todos.map((t, idx) => (
        <div
          key={t.text}
          onClick={() => dispatch({ type: "toggle", idx })}
      }
        >
          {t.text}
        </div>
   <div>
)

标签： javascriptreactjsreact-hooks

解决方案

改变这一行 -

const [text, setText] = useState();

至 -

const [text, setText] = useState("");

然后它应该工作。

请参阅此链接以获得正确的解释。

推荐阅读