使用setState分配值的问题

Question

使用React的新手，在尝试更改Textfield以更新状态时遇到了一些麻烦。使用通过useState设置初始状态的功能组件。

我确定我只是缺少一些简单的东西……但最终还是放弃并寻求帮助。

这是功能组件的完整代码：

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

const NewForm = () => {

  let [object, setObject] = useState({
    property: {
      value: '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.value').safeObject}
        type='text'
        onChange={props.handleChange}
      />
    </React.Fragment>
  );
}

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

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

Answer 1

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

您应该更改

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

到

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