使用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

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

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

新对象！=对象

Answer 2

所以，我在睡了一段时间后，通过更多的在线研究，终于找到了答案。使用lodash的set方法是可行的。因此，需要对my Textfield上的name属性进行细微更改：

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

在我的函数组件文件中导入set之后，导入{set}从'logash'；我可以修改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

如果希望对象具有value属性，则应添加{}。

你应该改变

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

到

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