(ReactJS) "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ..."

Question

由另一个控制器控制的用户窗体在控制台上抱怨为 “警告：组件正在将不受控制的输入更改为受控制。这可能是由于值从未定义值更改为已定义值引起的，这不应该发生。决定在组件的生命周期内使用受控或不受控的输入元素。更多信息：https://reactjs.org/link/controlled-components 输入跨度李 ul..."

这是组件代码：

export default({user}) => {
  if(!user) {
    return <div></div>
  } else {
    const [name,setName] = useState(user.name|| "")
    useEffect(() => {
      setName(user.name);
    }, [user])
              
    return <form>
             <fieldset> 
               <legend> Edit  {user.name }</legend>
               <p> 
                 <label htmlFor={"name"}> Name  </label>
                 <input  id="name" value={name || ""} onChange={e => setName(e.target.value)} />
               </p> 
             </fieldset>
           </form>
  }
}

我尝试了其他 Whosebug 答案中建议的所有修复，但仍然给出警告。
有什么我可能遗漏的吗？

Answer 1

我已经用这个工作示例更新了您的组件。

const { useEffect, useState } = React;

function Example({ user }) {

  const [name, setName] = useState(user.name);

  function handleChange(e) {
    setName(e.target.value);
  }

  useEffect(() => console.log(name), [name]);

  if(!user) return <div></div>;

  return (
    <form>
      <fieldset> 
        <legend>Edit name</legend>
        <input
          id="name"
          value={name}
          onChange={handleChange}
        />
      </fieldset>
    </form>
  )
};

const user = { name: 'Bob' };

ReactDOM.render(
  <Example user={user} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

(ReactJS) "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ..."

(ReactJS) "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ..."

javascript

warnings

userform

reactjs

react-component