遍历数组时不断变得未定义

Question

所以我只是在练习我的 react redux 技能。我是初学者。我创建了一个动作、reducer 和几个组件。我基本上是在制作一个待办事项应用程序。我正在从已成功完成的 API 中获取数据，但是当我尝试遍历数据并用<li> 标签包围时，问题就出现了。我收到Cannot read property 'map' of undefined，我不明白为什么，因为在控制台中我可以清楚地看到数组。

行动：

export function getLists(){
return function (dispatch) {
    return fetch ("https://reqres.in/api/users?page=1")
    .then( response => response.json())
    .then (json => {console.log('sdsd'); console.log(json);
        dispatch({  type: "ADD_ITEMS", payload: { json, loading: false}  });
    });
}
}

减速机：

const initialState = {
todothings: [],
loading: true
};
function rootReducer (state = initialState, action) {
    if( action.type === "ADD_ITEMS"){
        console.dir("In the ADD_ITEMS reducer" + action.payload);
        return Object.assign({}, state, {
            todothings: state.todothings.concat(action.payload.json),
            loading: action.payload.loading,
          });
    } else if ( action.type === "DELETE_ITEM") {
    } else {
        return state;
    }
} 
export default rootReducer;

待办事项组件：

import React, { Component } from 'react';
import { getLists } from '../actions/index';
import { connect } from 'react-redux';
import TodoItems from './TodoItems';

class TodosComponent extends Component {
    componentDidMount(){
        console.log('in the Todos comp -> componentDidMount()');
        this.props.getList();
    }
    render(){
        const {todothings , loading} = this.props;
        if(!loading){ 
            return(
                <div>  
                    <p>dfd</p>
                    {console.log(todothings)}
                    <TodoItems list={todothings}></TodoItems>
                </div>
            )
        } else {
            return (
                <p>Fetching from upstream.</p>
            )
        }
    }
}

function mapStateToProps(state){
    return {        
        todothings: state.todothings,
        loading: state.loading,
    }
}
function mapDispatchToProps(dispatch){
    return {
        getList: () => dispatch(getLists())
      };
}
const Todos = connect(mapStateToProps, mapDispatchToProps)(TodosComponent)
export default Todos;

TodoItem 组件：

import React from 'react';

function TodoItems (props) {
    return(
        <div>
            <ul>
            {console.log('In the todoitems')}
            {console.log(props)}

            {props.list.map( element => (
               <p>{element.data}</p>
            ))}
            </ul>
        </div>
    );
}

export default TodoItems;

编辑：

这是我目前所拥有的：

待办事项：

import React from 'react';

const TodoItems = ({ list = [] }) => {
    if (list.length === 0) return null;
    return (
      <ul>
        {list.map(item => (
          <li key={item.id} {...item}>
            <p>{item.first_name}</p>
          </li>
        ))}
      </ul>
    );
  };
export default TodoItems;

待办事项组件：

import React, { Component } from 'react';
import { getLists } from '../actions/index';
import { connect } from 'react-redux';
import TodoItems from './TodoItems';

class TodosComponent extends Component {
    componentDidMount(){
        console.log('in the Todos comp -> componentDidMount()');
        this.props.getList();
    }
    render(){
        const {todothings , loading} = this.props;
        if(!loading){ 
            return(
                <div>  
                    <p>dfd</p>
                    {console.log('in the todo comp')}
                    {console.log(todothings)}
                    <TodoItems list={todothings.data}></TodoItems>
                </div>
            )
        } else {
            return (
                <p>Fetching from upstream.</p>
            )
        }
    }
}

function mapStateToProps(state){
    return {        
        todothings: state.todothings,
        loading: state.loading,
    }
}
function mapDispatchToProps(dispatch){
    return {
        getList: () => dispatch(getLists())
      };
}
const Todos = connect(mapStateToProps, mapDispatchToProps)(TodosComponent)
export default Todos;

减速机：

const initialState = {
todothings: [],
loading: true
};

function rootReducer (state = initialState, action) {
    if( action.type === "ADD_ITEMS"){
        console.dir("In the ADD_ITEMS reducer" + action.payload);
        return Object.assign({}, state, {
            todothings: state.todothings.concat(action.payload.json.data),
            loading: action.payload.loading,
          });
    } else if ( action.type === "DELETE_ITEM") {
    } else {
        return state;
    }
} 
export default rootReducer;

行动：

export function getLists(){
return function (dispatch) {
    return fetch ("https://reqres.in/api/users?page=1")
    .then( response => response.json())
    .then (json => {console.log('sdsd'); console.log(json);
        dispatch({  type: "ADD_ITEMS", payload: { json, loading: false}  

});
        });
    }
}

现在没有错误，但什么也没有显示：

(3) [{…}, {…}, {…}]
0: {id: 1, email: "george.bluth@reqres.in", first_name: "George", last_name: "Bluth", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"}
1: {id: 2, email: "janet.weaver@reqres.in", first_name: "Janet", last_name: "Weaver", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"}
2: {id: 3, email: "emma.wong@reqres.in", first_name: "Emma", last_name: "Wong", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}
length: 3
__proto__: Array(0)

Answer 1

下午，

我认为您想要的数据来自prop.list.data 而不是props.list 内的<TodoItems />

在您的组件中<TodDo /> 尝试：

<TodoItems list={todothings.data}></TodoItems>

然后整理你的无状态组件<TodoItems />（覆盖一个空数组）：

const TodoItems = ({ list = [] }) => {
  if (list.length === 0) return null;

  return (
    <ul>
      {list.map(item => (
        <li key={item.id} {...item}>
          <ul>
            {Object.keys(item).map((data, key) => (
              <li {...{ key }}>{data}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
};

注意：

你的数组有一个对象，形状如下：

{
    id: 1,
    email: "g.buth@reqres.in",
    first_name: "George",
    last_name: "Bluth"
}

您想在<li> 中返回什么？

更新以循环遍历对象。