我在遍历数组时遇到问题答案

【问题标题】：I'm having trouble looping through an array我在遍历数组时遇到问题
【发布时间】：2019-12-04 05:51:53
【问题描述】：

我正在使用 MyJSON 为我的数据创建一个存储，但我无法循环遍历它

我已经尝试过 .map()、.forEach 但我一辈子都无法映射对象数组。

TypeError: Cannot read property 'map' of undefined

JSON 存储看起来像这样

const Leaderboard = (props) => {

    useEffect(() => {
        props.fetchScores();
    },[]);

    const renderList = () => {
        props.scores.map(item => {
            return <LeaderboardItem name={item.name} data={item.date} />
        })
    }

    return (
        <div className="leaderboard">
            <h1 className='leaderboard__header'> Leaderboard</h1>
            {renderList()}
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        scores: state.scores
    };
};

export default connect(mapStateToProps, { fetchScores })(Leaderboard);

我能够获取数据，将其添加到我的减速器中。当我 console.log 我的道具时，我得到了这个

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "ryan", score: 3, date: 1564079441826, id: 1}
1: {name: "ryan", score: 0, date: 1564080251976, id: 2}
2: {name: "ryan", score: 4, date: 1564080621616, id: 3}
3: {name: "ryan", score: 1, date: 1564088666800, id: 4}
4: {name: "ryan", score: 8, date: 1564088919233, id: 5}
length: 5
__proto__: Array(0)

难道我不能映射数组并返回每个对象吗？

      10 | },[]);
      11 | 
      12 | const renderList = () => {
    > 13 |     props.scores.map(item => console.log(item))
         | ^  14 | }
      15 | 
      16 | return (

export default (state = {}, action) => {
switch(action.type) {
    case FETCH_SCORES:
        return { ...state, ...action.payload }
    default:
        return state;
};

};

图片：

Redux-dev-tools-image1

console.log

【问题讨论】：

你是如何连接组件的？您没有正确传递数组。您也没有在 renderList 中返回 jsx
请添加更多代码。该错误表明props.scores 不包含任何内容
更新帖子以显示我的组件！当我在 mapStateToProps 中使用 console.log(state.scores) 时，它显示它包含对象数组
我还可以通过 redux-dev 工具看到我的分数缩减器返回相同的分数数组，其中包含对象
请发布您的减速器代码。状态是否类似于{ scores: [] }？您需要像state.scores.scores 一样连接它。 state.scores 是整个分数缩减器，如果您的列表是该对象上的键，您需要引用它。既然它说的是未定义，请确保scores 是combineReducers 中的键

标签： arrays json reactjs

【解决方案1】：

渲染项目列表you need to actually return JSX in your map

const renderList = () => {
  props.scores.map(item => <div key={item.id}>{item.name}</div>)
}

你应该 read up on best practices 在 react 中渲染元素列表。

编辑

由于scores 未定义，因此您需要确保正确引用事物。

scores 是在 combineReducers 中定义的键吗？又名combineReducers({scores: scoresReducer})

更新您的减速器以始终存储您想要存储的内容。不要更改数据类型

const defaultState = {
  scores: []
}
export default (state = defaultState, action) => {
  switch(action.type) {
    case FETCH_SCORES:
        return { ...state, scores: ...action.payload }
    default:
        return state;
  };
}

这假设action.payload 是一个分数数组，如果不是，则相应调整

【讨论】：

i 实际上是在返回这个，但是得到了 TypeError: props.scores.map is not a function const renderList = () => { props.scores.map(item => { return }) }
我看到你的更新了，你是如何更新reducer中的数据的？ state.scores 是一个数组吗？或者它可能是一个带有scores 数组的对象？
我添加了两张 redux 开发工具的图片和我的 reducer 代码。它肯定是 state.scores.scores，因为当我 console.log 时，它会直接记录数组。
我将其更新为 score.score，但我仍然收到 TypeError：无法读取未定义的属性“地图”。罪魁祸首可能是它试图在从存储中检索到状态之前映射数组吗？
嗯，你应该在你的状态中定义一个默认值，这样你就不会处理不同的数据类型

【解决方案2】：

map 创建另一个数组作为原始数组的转换。你只是 console.log'ing 在每个项目上，这将用于 forEach 而不是 map。

console.log 的返回值为undefined，在渲染[undefined, undefined, ...] 数组时可能会导致问题

【讨论】：

【解决方案3】：

你能不能考虑一下：

        props.scores && props.scores.map(item => {
            return <LeaderboardItem name={item.name} data={item.date} />
        })

【讨论】：

我试过了，它没有崩溃，你能告诉我额外的 props.scores && 有什么作用吗？
可能的情况是，当您运行 props.fetchScores() 时，它并没有真正立即获取数据，因此，分数可能仍然从它的源中未定义，直到获取集的值，一个可能的其他修复是给props.scores一个默认值Array[]