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

目的是用文本輸入替換值“字符串”。

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

Answer 1

如果你想要一個帶有 value 屬性的對象，你應該添加{} 。

你應該改變

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

到

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

Answer 2

所以我在睡了一段時間后設法弄清楚了這一點，並進行了更多的在線研究。 使用 lodash 的 set 方法是可行的方法。 所以需要對我的 Textfield 上的 name 屬性稍作更改：

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

newObject != 對象