Question

我正在使用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

Answer 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是分数数组，如果不是，则进行相应调整

Answer 2

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

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

Answer 3

您能考虑一下吗？

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

我在遍历数组时遇到麻烦

3 个答案:

编辑