主页 / 问题 / 1563594
Accepted
Maksim Ostroginskiy
Asked:2024-01-28 05:59:43 +0000 UTC2024-01-28 05:59:43 +0000 UTC

为什么 console.log 只显示对象的 1 个字段，尽管对象中有 3 个字段？

  • 772
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>
  )
}

这是console.log的结果

reactjs

1 个回答

  1. Best Answer

    要更改对象中某个键的值，您可以：

    使用扩展运算符并依赖当前值

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

    您可以做同样的事情，但如果可以有很多渲染并且每个下一个渲染都依赖于前一个渲染，则保证使用前一个值

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

相关问题