如何从 React 状态下的对象存储中获取值？

Question

我正在尝试进行 PUT 调用，我通过 id 获取数据并将其存储在名为“getData”的状态中。我可以对其进行过滤和映射，但我似乎无法从此数据中提取单个值，例如，getData.firstName 会给我一个错误，指出“getData 未定义”。但是你可以在控制台中看到这是一个数组。

我尝试从 getData 中过滤对象（这似乎是多余的，因为它在数组中只有一个对象）但是 filteredObject.firstName 抛出一个错误“filterObject is not defined”但是你可以在控制台中看到这是一个数组。

我需要单独获取键值对，以便我可以在我的 handleFirstName、handleLastName 等函数中比较它们。

import React, { useState,useEffect, usePrevious} from "react";
import { Link, useParams } from "react-router-dom";
import Axios from "axios";

export default function EditContact(props) {

  const [firstName, setFirstName] = useState();
  const [lastName, setLastName] = useState();
  const [phone, setPhone] = useState();
  const [email, setEmail] = useState();
  const [getData, setGetData] = useState();
  const {id}=useParams()
 
 console.log("ID from Params",id)

 const getDataByID=()=>{
  Axios.get(`http://localhost:5000/get/contacts/${id}`).then((response)=>{
    setGetData(response.data)
    console.log("Get Contact by ID",response.data)
  })
  .catch((error)=>{console.log(error)})
}
useEffect(()=>{
  getDataByID();

},[])

console.log("DataArray",dataArray)
console.log("GetData State",getData)
const filteredObject = getData&&getData.filter((item)=>{return(item.id===id)})  
console.log("Filtered Object",filteredObject)
const handleFirstName = (e) => {
    setFirstName(e.target.value);
  };
  const handleLastName = (e) => {
    setLastName(e.target.value);
  };
  const handlePhone = (e) => {
    setPhone(Number(e.target.value));
  };
  const handleEmail = (e) => {
    setEmail(e.target.value);
  };

  const putData = () => {
    const updateValues = {
      id:id,
      firstName: firstName,
      LastName: lastName,
      phone: phone,
      email: email,
    };
    console.log("UPDATE Values", updateValues);
    Axios.put(`http://localhost:5000/edit/contacts/${id}`, updateValues)
      .then((response) => {
        console.log("Edited Data", response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  // useEffect(()=>{
  //   putData();
  // },[])
  //  value={getData.firstName}
  return (
    <main className="editData">
      {getData&&getData.map((item,idx)=>{
          
            return(
              <div key={idx}>
         
        <form className="editData__form" onSubmit={(e)=>e.preventDefault()}  >

        <input className="editData__formInput" onChange={handleFirstName} defaultValue={item.firstName || {handleFirstName}} />

        <input className="editData__formInput" onChange={handleLastName} defaultValue={item.lastName || {handleLastName}} />

        <input className="editData__formInput" onChange={handlePhone} defaultValue={item.phone || {handlePhone}} />
        
        <input defaultValue="editData__formInput" onChange={handleEmail} defaultValue={item.email || {handleEmail}} />
       
      </form>
      <Link to='/contacts'>Back To Contacts</Link>
      </div>
      )
      })
    }
     <button onClick={putData}>PUT DATA</button>
     {usePrevious}
        <button onClick={getDataByID}>Get DATA</button>
    </main>
  );
}

Answer 1

根据控制台显示，您的数据似乎是数组类型。因此，您必须先访问您想要的数据项，然后才能访问特定数据属性.

例如getData[0].firstName

您的“未定义”错误可能来自第一次渲染。

记得useEffect runs after every render.
而你的 console.log 是直接写在渲染逻辑中的，这使得它们在每次渲染时都会被调用。
所以这意味着你的 console.log 在 useEffect.

的第一次调用时间之前被调用

如果 useEffect 尚未调用，请查看您的状态值。 getData 的初始值为 undefined。访问 undefined 值的属性将发出错误。

一个解决方案是指定 getData 状态的初始值，应该是 [].

如何从 React 状态下的对象存储中获取值？

How to get value from an object store in a state in React?

javascript

reactjs

express

axios

put