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 } }

在“挂钩”世界中，您将单个项目定义为具有单个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 /> value或受控制。 Read on

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

1 个答案: