如何在Reactw/Redux中通過映射后訪問一個物件的props？

我是React和Redux的新手，我正試圖根據一個公共的《動物之森》API制作一個應用程式。最初我遇到了一些問題，因為當我從API中獲得資料并試圖映射到組件中時，它說它是一個物件。我在StackOverflow上讀了很多不同的東西。我試著在最初的API回應上使用Object.entry，這多少有些幫助。我能夠為每個村民制作一個卡片組件。但是我無法訪問資料本身的道具，讓名字、性格和生日顯示出來。我一直在嘗試做我的第一個API呼叫，大約有3周的時間，并嘗試了幾個不同的專案和教程，但由于我是一個初學者，我最終還是碰壁了，而且仍然很困惑。

誰能試著看一下我的代碼，看看我哪里出了問題？

這是我的行動&初始API呼叫：

import { FETCH_CHARACTERS_REQUEST, FETCH_CHARACTERS_SUCCESS, FETCH_CHARACTERS_FAILURE } from "./actiontypes"/span>;
import axios from 'axios' ;

export const fetchCharactersRequest =（）=> {
    return {
        type: FETCH_CHARACTERS_REQUEST。
    }
}

const fetchCharactersSuccess = characters => {
    return {
        type: FETCH_CHARACTERS_SUCCESS,
        payload: characters
    }
}

const fetchCharactersFailure = error => {
    return {
        type: FETCH_CHARACTERS_FAILURE。
        payload: error
    }
}

export const fetchCharacters = （）=> {
    return (dispatch) =>/span> {
        dispatch(fetchCharactersRequest)
         axios.get('https://acnhapi.com/v1/villagers'/span>)
        .then(response => {
            const characters = Object.entries(response.data)
            dispatch(fetchCharactersSuccess(characters))
        })
        .catch(error =>  {
            const errorMsg = error.message
            dispatch(fetchCharactersFailure（errorMsg）)
        })
    }

這是我的reducer & 初始狀態：

import {
    FETCH_CHARACTERS_REQUEST。
    FETCH_CHARACTERS_SUCCESS,
    FETCH_CHARACTERS_FAILURE。
} from './actiontypes'/span>;

const initialState = {
    characters: [],
    isLoading: false,
    error: ''。
}

const reducer = (state = initialState，action) => {
    switch（action.type） {
        case FETCH_CHARACTERS_REQUEST。
            return {
                ...狀態。
                isLoading: truecase FETCH_CHARACTERS_SUCCESS:
            return {
                ...狀態。
                characters: action.payload。
                error: ''。
            }
        case FETCH_CHARACTERS_FAILURE:
            return {
                loading: false,
                characters: [],
                error: action.payload。
            }
        default: return state
    }
}

export default reducer。

這就是我的映射遇到很多問題的地方。我能夠成功地對第一個村民進行console.log(characterData.characters[0][1].personality)，但我不知道如何在地圖上得到正確的結果。

import React, {useEffect}。from 'reaction。
import {connect}. from 'react-redux';
import {fetchCharacters}. from './features/characterActions'。
import CharacterCard from ' ./CharacterCard';



function CharacterProfile({fetchCharacters, characterData}) {



    useEffect(() => {
        fetchCharacters()
    }, [])


    const listVillagers = characterData.characters.map((villager) => //span>
    <CharacterCard key={villager. key} data={villager} /> 
    )
  
    console.log(listVillagers)

    return characterData.isLoading ? (
        <h2>Loading...</h2> 
    ) : characterData.error ? (
        <h2>{characterData.error}</h2> 
    ) : (
        <div> 
            <h2>Animal Crossing Villageagers</h2>
            <div>/span>
                {listVillagers}
            </div> {listVillagers}
    
    </div>/span>
    
    )}


const mapStateToProps = state => {
    return {
        characterData: state.character。
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchCharacters: () => dispatch（fetchCharacters()
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (CharacterProfile)

而這是我試圖從資料中獲取資訊的字符卡。

import React from 'reaction'

function CharacterCard({name, birthday}) {

    return (
        <div> 
           <h2>名稱。{name}</h2>name: {name}>
          
        </div>
    )
}

export default CharacterCard

另外，如果有幫助的話，這是我提取資料的地方。https://acnhapi.com/v1/villagers

我覺得這些是我可能出錯的主要地方。我真的需要幫助，因為這已經開始讓我發瘋了。

uj5u.com熱心網友回復：

在CharacterPro中

2. 在CharacterProfile組件中，你可以試著安慰你的 "村民"

   。

   const listVillagers = characterData. characters.map((villager) =>/span>
      console.log(villager)
   )
   

   它將是一個有2個元素的陣列，就像這樣：

   ["ant00"/span>, {"id"/span>: 1,"file-name": "ant00","name": {...}, " personality": "Cranky", ...]

   因此，如果你只需要村民中的第二個元素，你應該這樣傳遞它：

   const listVillagers = characterData. characters.map((villager) =>/span> <CharacterCard key={villager. key} data={villager[1]} /> )

3. 因為你把villager[1]作為 "資料 "道具傳給了CharacterCard，所以在這個組件中，你應該把道具解壓縮為 "資料 "道具

   。

   function CharacterCard（{ data }） {
    ...
   }
   

4. 你的 "data "是一個物件，包括屬性 "name"、"birthday"......，所以如果你想訪問它們，你也需要從 "data "解構

   。

   const { name, birthday } = data;
   

5. 你的名字也是一個物件。
   

   "name"/span>: {
         "name-USen": "Cyrano",
         "name-EUen": "Cyrano"。
         ...
   }
   

   所以你不能在div中直接渲染，如果你想渲染 "name-USen"，你應該使用name["name-USen"]

   <h2>Name: {name["name-USen"/span>]}</h2>
   

這里是完整的代碼：

import React from "reaction";

function CharacterCard（{ data }） {
  const { name, birthday } = data;

  return (
    <div> 
      <h2>名稱。{name["name-USen"]}</h2>Name: {name["name-USen"]}</h2> 
      <h2>Birthday: {birthday}</h2>Birthday: </h2>
    </div>/span>
  );
}

export default CharacterCard;

標籤：

上一篇：我怎樣才能找到PureData中"s"物件的檔案？

下一篇：Jetpack用影像構成影片的奇怪問題