React+Redux中map遍历对象后如何正确访问其props属性？

核心问题1：Object.entries返回值结构认知错误 #

Object.entries() 处理对象后返回的是二维数组，每一项的结构为 [键名, 对应值]，你遍历拿到的每一个 villager 都是这种二元数组，下标0是村民的唯一键，下标1是完整的村民属性对象。

核心问题2：props传递与接收不匹配 #

你给CharacterCard传递的是data={villager}属性，但组件内直接解构name、birthday是接收不到的，需要和传递规则对应。

核心问题3：代码存在隐性bug #

• action中调用fetchCharactersRequest漏写括号，实际没有派发请求状态的action
• reducer请求失败分支中属性名写错，把isLoading写成了loading，会导致加载状态异常

具体修改代码 #

1. 修复action中的请求派发错误 #

修改fetchCharacters函数：

export const fetchCharacters = () => {
    return (dispatch) => {
        // 这里加括号执行函数拿到action对象
        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))
        })
    }
}

2. 修复reducer中的属性名错误 #

修改FETCH_CHARACTERS_FAILURE分支：

case FETCH_CHARACTERS_FAILURE:
    return {
        ...state,
        isLoading: false,
        characters: [],
        error: action.payload
    }

3. 修复CharacterProfile中的遍历逻辑 #

解构Object.entries返回的二元数组，正确传递属性：

const listVillagers = characterData.characters.map(([villagerKey, villagerInfo]) =>
  // 直接展开村民属性传递，或者你也可以传data={villagerInfo}，对应修改子组件即可
  <CharacterCard key={villagerKey} {...villagerInfo} />
)

4. 可选：如果不想展开传递，修改CharacterCard的属性接收 #

如果你选择传data={villagerInfo}，子组件修改为：

function CharacterCard({data}) {
  // 姓名是嵌套在name对象的name-USen字段，注意API返回的结构
  return (
      <div>
         <h2>姓名: {data.name['name-USen']}</h2>
         <p>性格: {data.personality}</p>
         <p>生日: {data.birthday}</p>
      </div>
  )
}

注：API返回的姓名是多层嵌套结构，需要通过name['name-USen']拿到英文名称，其他语言版本可以取对应字段

内容的提问来源于stack exchange，提问作者Tay_