Почему в console.log отображается только одно поле объекта, хотя в объекте 3 поля?

Question

import React, { useState } from 'react'
import './App.css'
import { Button, TextField } from '@mui/material'
import { Itodo } from './assets/types'

export const App = () => {
  const [todoBody, setTodoBody] = useState<Itodo>({bodyText: '', completed: false, id: Date.now()})
  const [todos, setTodos] = useState<Itodo[]>([])

  const addTodo = () => {
    console.log(todoBody)
  }

  return (
    <div className='background'>
      <div className='head'>
        <TextField onChange={event => setTodoBody({bodyText: event.target.value})} id="standard-basic" label="Введите текст" variant="standard" InputLabelProps={{ sx: {fontSize: '18px'} }} sx={{width: '40%'}}/>
        <Button variant="contained" color="success" size='large' sx={{ marginLeft: '10px' }} onClick={addTodo}>
          Добавить
        </Button>
      </div>
      <div className='body'>
      </div>
    </div>
  )
}

Answer 1

Что бы изменить значение одного ключа в объекте можно:

Использовать спред оператор и опираться на текущее значение

onChange={event => setTodoBody({ ...todoBody, bodyText: event.target.value})}

Можно сделать то же самое, но гарантированно использовать предыдущее значение, если рендеров может быть много и каждый следующий зависит от предыдущего

onChange={event => setTodoBody(prev => ({ ...prev, bodyText: event.target.value}))}

БЛОГ НА HUSL

Почему в console.log отображается только одно поле объекта, хотя в объекте 3 поля?

Ответы (1 шт):