获取成员(member)数据后，成员(member)状态会是这样

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

如何通过改变文本框的值来改变上述对象的值？

例如:更改名称。更改电子邮件。

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

最佳答案

假设 member 已经有一个值(就像您在问题中描述的那样)，您可以通过使用传播运算符执行类似的操作来更改它的一个或多个属性:

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

参见 Hooks API and useState documentation获取更多信息。

https://stackoverflow.com/questions/70588339/