Реакция onChange event.target.value Объект событие обновления объекта

Question

Я создаю поле формы «Реагирующий материал». Я нашел что-то очень странное. Во-первых, обновите updatedValue в onchange в индексе. js файл Функция onChange предоставляется компонентом InputField (. js). И компонент InputField добавляет / обновляет event.target.value, используя onChange, полученный от родителя.

const onChange = updatedValue => {
    console.log('updatedValue',updatedValue)
    setField({
      ...field,
      ...updatedValue
    });
    console.log("1", field)
  };

Если вы посмотрите на этот код и рисунок выше , {Member Name: "1"} появляется в updatedValue. (Console.log) Однако, если вы посмотрите внизу {console.log ('field', field)}), это событие обновления. Почему это произошло?

index. js

import React, {useState} from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import InputOption from './InputOption.js';
import InputField from './InputField';
import InputPassword from './InputPassword.js';
import InputRadio from './InputRadio';
import InputPhone from './InputPhone';

const data = [
  {
    label: 'Member Type',
    types: [
      {
        value: 'public',
        label: 'Public member',
      },
      {
        value: 'private',
        label: 'Private member',
      },
      {
        value: 'master',
        label: 'Master member',
      },
    ]
  },
  {
    label: 'Member Level',
    types: [
      {
        value: '1',
        label: 'Level 1',
      },
      {
        value: '2',
        label: 'Level 2',
      },
      {
        value: '3',
        label: 'Level 3',
      },
      {
        value: '4',
        label: 'Level 4',
      },
      {
        value: '5',
        label: 'Level 5',
      },
    ]
  },
  {
    label: 'Member os',
    types: [
      {
        value: 'Android',
        label: 'Android',
      },
      {
        value: 'Ubuntu',
        label: 'Ubuntu',
      },
      {
        value: 'Windows',
        label: 'Windows',
      },
      {
        value: 'Mac',
        label: 'Mac',
      },
      {
        value: 'Redhat',
        label: 'Redhat',
      },
    ]
  }
]

export default function Member() {
  const [field, setField] = useState({});

  const onChange = updatedValue => {
    console.log('updatedValue',updatedValue)
    setField({
      ...field,
      ...updatedValue
    });
    console.log("1", field)
  };

  return (
    <React.Fragment>
      <h4>Member register</h4>
      <form onChange={field => onChange(field)} noValidate autoComplete="off">
      {
        data.map((option, i) =>
          <InputOption 
            key={i}
            types={option.types}
            label={option.label}
            onChange={onChange}
          />
        )
      }
      <TextField id="filled-basic" label="Member Id" variant="filled" />
      <Button variant="outlined">✔ Duplicate Check</Button>
      <br/>
      <InputPassword label="Password"/>
      <br/>
      <InputPassword label="Password Reconfirm"/>
      <br/>
      <InputField id="Member Name" label="Member Name" field={field} onChange={onChange}/>
      <br/>
      <TextField id="standard-basic" label="Birthday" />
      <br/>
      <InputRadio/>
      <br/>
      <InputPhone/>
      </form>
      <br/>
      {/* <p>
        {JSON.stringify(field, null)}
      </p>
       */}
       {console.log('field', field)}
    </React.Fragment>
  );
}

InputField. js

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

export default function InputField({label, onChange, field}) {
    const optionChange = event => {
        console.log(label);
        onChange({
          [label]: event.target.value
        });
      };

    return (
        <TextField 
            id={`filled-basic-${label}`}
            label={label} 
            value={field.label}
            onChange={optionChange}
        />
    );
}