如何在反应中更改 useState 的 object 值？

Question

获取会员数据后， member state会是这个样子。

{
  _id: '61d34027ca50827501279eb0',
  index: 1,
  email: 'bcr90348@zwoho.com',
  name: '1',
  active: true
}

如何通过更改文本框值来更改上述object的值？

例如：改名。 更改 email。

import React, { useEffect, useState } from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CForm,
  CFormInput,
  CFormLabel,
  CRow,
} from '@coreui/react'
import PropTypes from 'prop-types'

const Edit = (props) => {
  const id = props.match.params.id
  const [member, setMember] = useState({})

  const handleLoadMember = async () => {
    try {
      const _data = await fetch(`http://localhost:4000/api/v1/member/${id}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })

      if (_data.status === 200) {
        const data = await _data.json()
        setMember(data.member)
      } else if (_data.status === 404) {
      } else {
        throw new Error()
      }
    } catch (err) {
      console.error(err)
    }
  }

  useEffect(() => {
    handleLoadMember()
  }, [])

  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4 w-75">
          <CCardHeader>
            <strong>Add New Member</strong>
          </CCardHeader>
          <CCardBody>
            <p className="text-medium-emphasis small">
              Click on save button after editing member details.
            </p>
            <CForm>
              <div className="d-inline-flex w-100">
                <div className="mb-3 me-1 w-50">
                  <CFormLabel>Email:</CFormLabel>
                  <CFormInput
                    type="email"
                    placeholder="name@example.com"
                    value={member.email}
                    onChange={(e) => console.log(e.target.value)}
                  />
                </div>

                <div className="mb-3 w-50">
                  <CFormLabel>Name:</CFormLabel>
                  <CFormInput type="text" placeholder="Perera's Home" value={member.name} />
                </div>
              </div>
              <div className="mb-3">
                <CButton color="primary">Submit</CButton>
              </div>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}

Edit.propTypes = {
  match: PropTypes.any,
}

export default Edit

Answer 1

假设member已经有一个值（就像您在问题中描述的那样），您可以通过使用扩展运算符执行以下操作来更改它的一个或多个属性：

setMember(member => ({...member, name: "My New Name", email: "NewEmail"}))

有关详细信息，请参阅Hooks API 和 useState 文档。

Answer 2

您可以定义一个onChangeHandler如下所示。 并将定义name道具添加到每个字段。

  const onChangeHandler = (e) => {
    const { name, value } = e.target;
    setMember((prevState) => ({ ...prevState, [name]: value }));
  };

<CFormInput
    type="email"
    placeholder="name@example.com"
    name="email"
    onChange={onChangeHandler}
    value={member.email}
 />

<CFormInput
     type="text"
     placeholder="Perera's Home"
     name="name"
     onChange={onChangeHandler}
     value={member.name}
 />

代码沙箱