第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React useState 設(shè)置來自數(shù)據(jù)庫的響應(yīng),但是當(dāng)我嘗試訪問

React useState 設(shè)置來自數(shù)據(jù)庫的響應(yīng),但是當(dāng)我嘗試訪問

慕容708150 2023-08-05 20:48:23
我需要一些幫助來理解為什么可以在索引 [0] 處訪問我的數(shù)據(jù),但是一旦我嘗試訪問其上的鍵,它就會返回未定義的錯誤。我的數(shù)據(jù)的初始狀態(tài)是一個空數(shù)組。我已經(jīng)確認(rèn)從響應(yīng)中返回的確實(shí)是一個長度為 1 的數(shù)組,其中包含一個對象。應(yīng)用程序.jsximport React, { useState, useEffect } from 'react';import Reviews from './Reviews.jsx';import axios from 'axios';const ReviewsApp = () => {  const [listingData, setlistingData] = useState([]);  useEffect(() => {    let id = Math.floor(Math.random() * 100) + 1 // Random Test ids    axios      .get(`listings/${id}/reviews`)      .then(res => setlistingData(res.data))      .catch(err => console.log(err));  }, []);  return (    <div>      <Reviews listingData={listingData}/>    </div>  );};export default ReviewsApp;評論.jsximport React, { useState } from 'react';const Reviews = ({ listingData }) => {  return (    <div>      {console.log(listingData[0].listing_reviews)}    </div>  )}export default Reviews;所以現(xiàn)在,如果我 console.log(listingData[0]) 它工作沒有問題并返回具有以下結(jié)構(gòu)的對象:listing_id: 0,listing_rating: 1.5,listing_reviews: [] <---Full of objects當(dāng)我嘗試訪問其中一個鍵時,它會失敗并給出未定義的錯誤。如果您還想了解更多信息,請告訴我。謝謝。
查看完整描述

1 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗 獲得超7個贊

console.log問題是您正在Reviews.jsx 文件中呈現(xiàn)結(jié)果。在 JSX 中放入大括號中的任何內(nèi)容{},React 都會渲染。因此,如果你調(diào)用一個函數(shù),React 將嘗試渲染該函數(shù)的返回值。如果您嘗試渲染,React 會拋出錯誤undefined。由于console.log總是返回undefined,所以你總是會得到一個錯誤。即使您最終在listingDataprop 中有數(shù)據(jù),由于您仍在嘗試渲染返回值console.log并且它仍然返回undefined,因此您會收到錯誤。


所以,只要擺脫console.log. 另外,您可能需要檢查道具中是否確實(shí)有數(shù)據(jù)listingData。否則,在數(shù)據(jù)實(shí)際加載之前您會收到錯誤消息。


所以,你的文件是這樣的Reviews.jsx:


import React, { useState } from 'react';


const Reviews = ({ listingData }) => {

  // you can still add a debug line up here. that won't be an issue

  console.log(listingData);


  const reviews = listingData.length ? listingData[0].listing_reviews : null;


  return (

    <div>

      {reviews}

    </div>

  )

}


export default Reviews;


查看完整回答
反對 回復(fù) 2023-08-05
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號