React useState中对象数组（subjects）的访问与更新方法咨询

一、访问subject1和subject2 #

因为subject是包含单个对象的数组，需要先取数组的第一个元素（索引为0），再访问对应属性：

• 访问subject1：details.subject[0].subject1
• 访问subject2：details.subject[0].subject2

对应输入框的基础写法：

<input 
  type="text" 
  placeholder="Enter subject1" 
  value={details.subject[0].subject1} 
  onChange={(e) => { /* 更新逻辑 */ }} 
/>
<input 
  type="text" 
  placeholder="Enter subject2" 
  value={details.subject[0].subject2} 
  onChange={(e) => { /* 更新逻辑 */ }} 
/>

二、更新subject1和subject2 #

React状态更新必须遵循不可变性原则，不能直接修改原状态对象/数组，需创建新副本后再更新，以下两种方法按需选择：

方法1：针对单个元素的简化更新（当前数组仅一个元素场景）

直接复制原对象和数组元素，修改目标属性：

// 更新subject1的onChange逻辑
onChange={(e) => {
  const newDetails = { ...details };
  newDetails.subject[0] = { ...newDetails.subject[0], subject1: e.target.value };
  setDetails(newDetails);
}}

// 更新subject2的onChange逻辑
onChange={(e) => {
  const newDetails = { ...details };
  newDetails.subject[0] = { ...newDetails.subject[0], subject2: e.target.value };
  setDetails(newDetails);
}}

方法2：通用数组元素更新（适合数组多元素场景）

使用函数式更新+数组map方法，确保状态更新的准确性，同时兼容未来数组扩容的需求：

// 更新subject1的onChange逻辑
onChange={(e) => {
  setDetails(prevDetails => ({
    ...prevDetails,
    subject: prevDetails.subject.map((item, index) => {
      if (index === 0) { // 指定要更新的元素索引
        return { ...item, subject1: e.target.value };
      }
      return item; // 其他元素保持不变
    })
  }));
}}

// 更新subject2的onChange逻辑
onChange={(e) => {
  setDetails(prevDetails => ({
    ...prevDetails,
    subject: prevDetails.subject.map((item, index) => {
      if (index === 0) {
        return { ...item, subject2: e.target.value };
      }
      return item;
    })
  }));
}}

三、完整示例代码 #

import { useState } from 'react';

function App() {
  const [details, setDetails] = useState({
    Name: "",
    Number: null,
    subject: [{
      subject1: "",
      subject2: ""
    }]
  });

  return (
    <div>
      <input 
        type="text" 
        placeholder="Enter name" 
        value={details.Name} 
        onChange={(e) => setDetails({ ...details, Name: e.target.value })} 
      />
      <input 
        type="text" 
        placeholder="Enter number" 
        value={details.Number} 
        onChange={(e) => setDetails({ ...details, Number: e.target.value })} 
      />
      <input 
        type="text" 
        placeholder="Enter subject1" 
        value={details.subject[0].subject1} 
        onChange={(e) => {
          setDetails(prev => ({
            ...prev,
            subject: prev.subject.map((item, idx) => idx === 0 ? { ...item, subject1: e.target.value } : item)
          }));
        }} 
      />
      <input 
        type="text" 
        placeholder="Enter subject2" 
        value={details.subject[0].subject2} 
        onChange={(e) => {
          setDetails(prev => ({
            ...prev,
            subject: prev.subject.map((item, idx) => idx === 0 ? { ...item, subject2: e.target.value } : item)
          }));
        }} 
      />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者ayantika das