Question

在键入和记录输入的e.target.value时，我得到了默认值+最后一个击键，但没有重新渲染。我猜想React无法识别状态发生了变化，但是在寻找正确的方法时遇到了问题。

这是有问题的代码

  const [text, setText] = useState(task.text);
  console.log(text);

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  const taskInput = (
    <form>
      <input type='text' value={text} onChange={handleInputChange} />
    </form>
  );

完整文件：

import React, { useContext, useState } from "react";
import { TaskContext } from "../context/TaskState";

const Task = ({ task }) => {
  const { deleteTask } = useContext(TaskContext);
  const { changeStatus } = useContext(TaskContext);

  const taskText = (
    <div
      className='task-text'
      onClick={() => changeStatus({ ...task, done: !task.done })}
      style={task.done ? { textDecoration: "line-through" } : null}
    >
      {task.text}
    </div>
  );

  const [text, setText] = useState(task.text);
  console.log(text);

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  const taskInput = (
    <form>
      <input type='text' value={text} onChange={handleInputChange} />
    </form>
  );

  const [option, setOption] = useState(taskText);

  return (
    <div className='task-container'>
      <button className='task-edit' onClick={() => setOption(taskInput)}>
        edit
      </button>
      <button className='task-delete' onClick={() => deleteTask(task.id)}>
        x
      </button>
      {option}
    </div>
  );
};

export default Task;

我正在为其他应用程序和化简器使用全局状态。

Answer 1

我认为，您输入的onChange可能会导致此错误。尝试更换它：

onChange={handleInputChange}

与此：

onChange={(e) => handleInputChange(e)}

e对象可能不会传递给您的方法。

Answer 2

请尝试将您的taskInput值包装在具有依赖项useMemo的{{1}}中，因为在重新渲染期间将JSX存储为变量时，由于它们不知道使用的变量，它们引用的是先前的值价值改变了。

text

Answer 3

问题是我在jsx内部传递选项的方式。

我将选项状态设置为布尔值，将taskText和taskInput转换为函数，并在jsx中有条件地传递了选项。

import React, { useContext, useState } from "react";
import { TaskContext } from "../context/TaskState";

const Task = ({ task }) => {
  const { deleteTask } = useContext(TaskContext);
  const { changeStatus } = useContext(TaskContext);

  const taskText = () => {
    return (
      <div
        className='task-text'
        onClick={() => changeStatus({ ...task, done: !task.done })}
        style={task.done ? { textDecoration: "line-through" } : null}
      >
        {task.text}
      </div>
    );
  };

  const [text, setText] = useState(task.text);
  console.log(text);

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  const taskInput = () => {
    return (
      <form>
        <input type='text' value={text} onChange={handleInputChange} />
      </form>
    );
  };

  const [option, setOption] = useState(true);

  return (
    <div className='task-container'>
      <button className='task-edit' onClick={() => setOption(!option)}>
        edit
      </button>
      <button className='task-delete' onClick={() => deleteTask(task.id)}>
        x
      </button>
      {option ? taskText() : taskInput()}
    </div>
  );
};

export default Task;

输入未使用钩子重新呈现onChange

3 个答案: