在清除输入标签时，我得到一个组件正在更改要控制的文本类型的不受控制输入

Question

我设计了以下组件：

import React, { useState } from "react";

function Search(props) {
  const [studentData, setStudentData] = useState({
    studentName: "",
    joiningDate: "",
  });

  const onAdd = () => {
    
        const emptyObject = {
          name: "",
          joiningDate: "",
        };
        setStudentData(emptyObject);
      }
    }
  };

  return (
    <div className="my-50 layout-row align-items-end justify-content-end">
      <label htmlFor="studentName">
        Student Name:
        <div>
          <input
            id="studentName"
            name="studentName"
            data-testid="studentName"
            type="text"
            value={studentData.name}
            onChange={onRecordUpdate}
            className="mr-30 mt-10"
          />
        </div>
      </label>
      
      
    </div>
  );
}

export default Search;

问题是，当我在“搜索”函数中使用以下代码在“居民列表”中输入输入字段后尝试清除输入字段时

const emptyObject = {
  name: "",
  joiningDate: "",
};
setStudentData(emptyObject);

我收到以下错误。我不确定为什么 React 假设输入标签不受控制，因为我正在使用状态对其进行初始化。

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
    in input (at Search.js:88)
    in div (at Search.js:87)
    in label (at Search.js:85)
    in div (at Search.js:84)
    in Search (at App.js:35)
    in div (at App.js:34)
    in div (at App.js:32)
    in App (at src/index.js:8)

任何人都可以提供任何见解吗？

Answer 1

似乎您在初始状态下使用 studentName 作为输入的值，而在 emptyObject 内部只是 name。所以 studentName 将是 undefined 并且 React 假定不受控制的组件。

我认为将 name 重命名为 studentName 可以解决您的问题。

在清除输入标签时，我得到一个组件正在更改要控制的文本类型的不受控制输入

On clearing input label I'm getting a component is changing an uncontrolled input of type text to be controlled

reactjs

react-hooks