我正在尝试显示已获取的数据。但我似乎无法在 react 中显示嵌套对象属性。有任何想法吗?如果我记录数据,我首先得到一个未定义的数据,然后是正确的数据。 我的猜测是我需要等待数据加载然后显示它。但它确实适用于不在嵌套对象中的标题。
function SingleBeneficiary({ match }) {
const [data, setData] = useState({ data: []});
const id = match.params.id
useEffect(() => {
async function fetchData() {
const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
const jsonData = await response.json()
setData(jsonData)
}
fetchData();
}, [])
return (
{data.title} // works
{data.address.careOf} // dont work
数据
{
"title":"myTitle",
"address":{
"careOf": "my adress"
}
}
最佳答案
你可以这样尝试吗? 我将初始数据设置为空,作为返回,我检查它是否不为空。 如果地址可以为空,则需要额外的空检查。
function SingleBeneficiary({ match }) {
const [data, setData] = useState(null);
const id = match.params.id
useEffect(() => {
async function fetchData() {
const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
const jsonData = await response.json()
setData(jsonData)
}
fetchData();
}, [])
return (
<div>
{data && (
<div>
<p>data.title</p>
<p>data.address.careOf</p>
</div>
)}
</div>
);
}
关于json - 使用 React hook 获取数据在嵌套 obj 属性上返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58236120/