在 React with/Redux 中映射后如何访问对象的属性？

Question

我是 React 和 Redux 的新手，我正在尝试制作一个基于 public 动物之森 API 的应用程序。我最初遇到问题是因为在我从 API 获取数据并尝试映射到组件后，它说它是一个对象。我在 Whosebug 上阅读了很多不同的东西。我尝试在最初的 API 响应中使用 Object.entries，这有所帮助。我能够为每个村民制作一个卡片组件。但我无法访问数据本身中的道具来显示姓名、个性和生日。大约 3 周以来，我一直在尝试进行我的第一次 API 通话，并尝试了几个不同的项目和教程，但由于我是初学者，我最终还是碰壁了，而且仍然很困惑。

有人可以查看我的代码以了解我哪里出错了吗？

这是我的行动和最初的 API 电话：

import { FETCH_CHARACTERS_REQUEST, FETCH_CHARACTERS_SUCCESS, FETCH_CHARACTERS_FAILURE } from "./actiontypes";
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) => {
        dispatch(fetchCharactersRequest)
         axios.get('https://acnhapi.com/v1/villagers')
        .then(response => {
            const characters = Object.entries(response.data)
            dispatch(fetchCharactersSuccess(characters))
        })
        .catch(error => {
            const errorMsg = error.message
            dispatch(fetchCharactersFailure(errorMsg))
        })
    }
}

这是我的减速器和初始状态：

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

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

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case FETCH_CHARACTERS_REQUEST:
            return {
                ...state,
                isLoading: true
            }
        case FETCH_CHARACTERS_SUCCESS:
            return {
                ...state,
                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 'react';
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) =>
    <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 Villagers</h2>
            <div>
                {listVillagers}
            </div>
    
    </div>
    
    )}


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

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

export default connect(mapStateToProps, mapDispatchToProps)(CharacterProfile)

这是我试图从数据中获取信息的角色卡。

import React from 'react'

function CharacterCard({name, birthday}) {

    return (
        <div>
           <h2>Name: {name}</h2>
          
        </div>
    )
}

export default CharacterCard

此外，如果有帮助，我会从这里提取数据：https://acnhapi.com/v1/villagers

我觉得这些是我可能出错的主要地方。我真的需要帮助，因为它开始让我发疯。

Answer 1

在CharacterProfile组件中，你可以尝试安慰你的“村民”

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

它将是一个包含 2 个元素的数组，如下所示：

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

所以如果你只需要村民中的第二个元素，你应该这样传递它：

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

因为你将 villager[1] 作为“数据”道具传递给 CharacterCard，所以在这个组件中，你应该将道具解构为“数据”道具
```
function CharacterCard({ data }) {
 ...
}
```
而你的“data”是一个包含属性“name”、“birthday”...的对象，所以如果你想访问它们，你还需要从“data”中解构。 =18=]
```
const { name, birthday } = data;
```
你的名字也是一个对象。
```
"name": {
      "name-USen": "Cyrano",
      "name-EUen": "Cyrano",
      ...
}
```
所以你不能直接在div中渲染它，如果你想渲染“name-USen”，你应该使用name[“name-USen”]
```
<h2>Name: {name["name-USen"]}</h2>
```

完整代码如下：

import React from "react";

function CharacterCard({ data }) {
  const { name, birthday } = data;

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

export default CharacterCard;

在 React with/Redux 中映射后如何访问对象的属性？

How do I access the props of an object after mapping through in React w/ Redux?

javascript

object

jsx

redux