为什么在React的useReducer简单Todo应用中我会收到“组件正在将类型为未定义的不受控制的输入更改为受控制的输入..”的提示？

11 浏览
0 Comments

为什么在React的useReducer简单Todo应用中我会收到“组件正在将类型为未定义的不受控制的输入更改为受控制的输入..”的提示？

这个问题已经有了答案:

ReactJS中组件正在将不受控制的文本类型输入更改为受控错误

组件正在将类型未定义的不受控制的输入更改为受控制的。输入元素不应该从不受控制的状态切换到受控制的状态（反之亦然）。在组件的生命周期中决定使用受控制的或不受控制的输入元素。

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 (
     {todos.map((t, idx) => (
dispatch({ type: "toggle", idx })} } > {t.text} )

admin 更改状态以发布 2023年5月21日
0

1 答案

0 Comments

修改这一行 -

const [text, setText] = useState();

变成 -

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

然后它就应该正常工作了。

有关详细说明，请参阅此链接。

0