使用 React 钩子从另一个页面使用 useEffect 更新状态

Question

我想用另一个页面的数据更新状态。尝试更新状态后出现错误：

index.js:1375 警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

如何使用钩子正确更新状态？？

const [data, changeData] = useState({
    name: '',
    email: '',
    phone: '',
    cv: '',
    documents: '',
    rodo: false,
    regulations: false,
  });

  useEffect(() => {
    if (location.data) {
      changeData((prevState) => {
        return { data: { name: location.data.name } };
      });
    }
  }, []);

输入

<div className='form-control'>
                <label htmlFor='name'>
                  <i className='fas fa-user'></i>
                </label>
                <input
                  value={data.name}
                  id='name'
                  name='name'
                  onKeyPress={handleKeyPress}
                  onChange={(e) => handleChangeData(e, 'name')}
                  type='text'
                  placeholder='Imię i nazwisko'
                />
              </div>

Answer 1

来自基于类的组件的副作用。您在代码中尝试做的是将存储在数据中的整个先前状态替换为如下所示的新对象：

{ data: { name: location.data.name } }

在 Hooks 世界中，您将单个项目定义为具有单独的 useState，但要继续您正在处理的工作，解决方法如下：

const [data, changeData] = useState({
  name: '',
  email: '',
  phone: '',
  cv: '',
  documents: '',
  rodo: false,
  regulations: false,
});

useEffect(() => {
  if (location.data) {
    changeData({
      ...data,
      name: location.data.name
    });
  }
}, []);

理想情况下，您应该在状态下定义单个项目，如下所示：

const [name, changeName] = useState('');
const [email, changeEmail] = useState('');
....
const [rodo, changeRodo] = useState(false);

然后在您的 useEffect 挂钩中，您将更改单个项目，如下所示：

useEffect(() => {
  if (location.data) {
    changeName(location.data.name);
  }
}, []);

这样，name 总是被定义，因此<input />s value 总是被设置或控制。 Read on