Постоянно становится неопределенным при переборе массива

Question

Так что я просто практикую свои навыки редукции.Я начинающий.Я создал действие, редуктор и несколько компонентов.Я в основном делаю приложение todo.Я получаю данные из 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;

Компоненты ToDo:

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;

РЕДАКТИРОВАТЬ:

Это то, что у меня есть до сих пор:

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;

Компонент ToDo:

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>?

Обновление для циклического прохождения объекта.