使用 setState 赋值时出现问题

Question

刚开始使用 React，在尝试更改文本字段以更新状态时遇到了一些麻烦。使用使用 useState 设置初始状态的功能组件。

我确定我只是遗漏了一些简单的东西...但最终放弃并寻求帮助。

功能组件的完整代码如下：

import React, { useState } from 'react';
import Step1 from '../Element/FormStep1';

const NewForm = () => {

  let [object, setObject] = useState({
    property: {
      entry: 'string'
    }
  });

  function handleChange(event) {
    const {name, value} = event.target;
    setObject({
      ...object,
      [name]: value
    })
    console.log(object)
  };

  return (      
    <form>     
        <Step1 
          handleChange={handleChange}
          object={object}
        />                        
    </form>
  );
}

export default NewForm

对于表单组件：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import t from 'typy'

export default function Step1(props) {

  return(
    <React.Fragment>
      <TextField
        name={t(props.object, 'property.entry').safeObject}
        type='text'
        onChange={props.handleChange}
      />
    </React.Fragment>
  );
}

当 handleChange 函数运行时，它不会替换目标属性，而是创建一个新的属性并以原始值作为名称，即

object {
  property: {
    entry: 'string'
  },
  string: value //Text input
}

目的是用文本输入替换值“string”。

 object {
   property: {
     entry: 'value' //Text input 
   }
 }

Answer 1

如果您想要一个值为属性的对象，您应该添加 {}.

你应该改变

setObject({
  ...object,
  [name]: value
})

到

setObject({
  ...object,
  [name]: { value } // added { }
})

Answer 2

所以我在睡了一觉和更多的在线研究之后设法解决了这个问题。使用 lodash 中的 set 方法是可行的方法。因此需要对我的文本字段中的名称属性进行细微更改：

<TextField
  name='property.value'
  type='text'
  onChange={props.handleChange}
/>

并且在我的函数组件文件中导入 set 之后，import { set } from 'lodash';我可以修改 handleChange 函数如下：

function handleChange(event) {
  const {name, value} = event.target;
  set(object, name, value)
  console.log(object) // to see that it worked in the console. 
}

这现在按预期工作（几个小时后受挫）

注意...这是我实际找到答案的地方：

https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937

Answer 3

您的对象将在下一次渲染中更改。

function handleChange(event) {
    const {name, value} = event.target;
    const newObject = {
      ...object,
      [name]: value
    } 
    setObject(newObject)
    console.log('newObject', newObject)
    console.log('currentObject', object)
  };

新对象 != 对象

使用 setState 赋值时出现问题

Problems assigning value with setState

javascript

object

reactjs

react-hooks

use-state