如何从 React 状态下的对象存储中获取值?
How to get value from an object store in a state in React?
我正在尝试进行 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>
);
}
根据控制台显示,您的数据似乎是数组类型。因此,您必须先访问您想要的数据项,然后才能访问特定数据属性.
例如getData[0].firstName
您的“未定义”错误可能来自第一次渲染。
记得useEffect
runs after every render.
而你的 console.log
是直接写在渲染逻辑中的,这使得它们在每次渲染时都会被调用。
所以这意味着你的 console.log
在 useEffect
.
的第一次调用时间之前被调用
如果 useEffect
尚未调用,请查看您的状态值。 getData
的初始值为 undefined
。
访问 undefined
值的 属性 将发出错误。
一个解决方案是指定 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>
);
}
根据控制台显示,您的数据似乎是数组类型。因此,您必须先访问您想要的数据项,然后才能访问特定数据属性.
例如getData[0].firstName
您的“未定义”错误可能来自第一次渲染。
记得useEffect
runs after every render.
而你的 console.log
是直接写在渲染逻辑中的,这使得它们在每次渲染时都会被调用。
所以这意味着你的 console.log
在 useEffect
.
如果 useEffect
尚未调用,请查看您的状态值。 getData
的初始值为 undefined
。
访问 undefined
值的 属性 将发出错误。
一个解决方案是指定 getData
状态的初始值,应该是 []
.