React中如何从存储在state里的对象数组中提取单个属性值？

问题根因 #

• 你请求返回的response.data是数组类型，即使仅包含1个联系人对象，存入getData后仍为数组结构，数组本身不存在firstName这类自定义属性，直接调用自然报错
• filter方法的返回值永远是数组，所以你过滤后拿到的filteredObject还是数组，同样不能直接读取对象属性

解决方案 #

方案1（推荐）：存储时直接提取目标对象 #

因为你是按ID查询单条联系人，返回的数组里只会有一个符合条件的对象，直接取数组第一位存入state即可：

1. 给getData设置初始值为空对象，避免初始渲染时报错

const [getData, setGetData] = useState({})

2. 修改接口请求成功后的赋值逻辑

const getDataByID=()=>{
  Axios.get(`http://localhost:5000/get/contacts/${id}`).then((response)=>{
    // 取数组第一个元素存入state，没有的话默认空对象兜底
    setGetData(response.data?.[0] || {})
    console.log("Get Contact by ID",response.data)
  })
  .catch((error)=>{console.log(error)})
}

修改后你可以直接通过getData?.firstName读取属性，加可选链?.是为了避免请求未完成时getData为空导致报错。

方案2：不修改存储逻辑，使用时提取对象 #

如果你需要保留getData的数组结构，取属性前先提取数组内的对象即可：

• 直接取数组第一位：getData?.[0]?.firstName
• 过滤后取第一位：

const filteredObject = getData?.filter((item)=> item.id === id)?.[0]
// 之后就可以用 filteredObject?.firstName 读取属性

额外代码优化建议 #

1. 你当前表单用了defaultValue，如果需要做修改前后的对比，建议改成受控组件，用value绑定状态，更方便获取对比值：

<input 
  className="editData__formInput" 
  onChange={handleFirstName} 
  value={firstName ?? getData?.firstName} 
/>

2. 删掉input里|| {handleFirstName}这类冗余代码，否则初始未输入时会显示[object Object]
3. 你在putData的时候如果要判断字段是否修改，直接拿当前的firstName等state值和getData里的原属性对比即可：

// 示例：判断firstName是否修改
const firstNameChanged = firstName !== getData.firstName

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