Question

我正在使用Redux构建一个简单的React应用程序并设置了一个简单的api端点，其中/api/books返回一个JSON blob书：

[{"id":0,"title":"Eloquent JavaScript"},
{"id":1,"title":"JavaScript the Good Parts"}]

我正在使用axios和Redux来获取此JSON。在BookList智能容器中：

我的减速机：

import { FETCH_BOOKS } from '../actions/index';

export default function(state = [], action) {
    switch(action.type) {
        case FETCH_BOOKS:
            return [ action.payload.data, ...state ]
    }
    return state;
}

我的行动：

import axios from 'axios';

export const FETCH_BOOKS = 'FETCH_BOOKS';

export function fetchBooks() {
    const request = axios.get('/api/books');

    return {
        type: FETCH_BOOKS,
        payload: request
    }
}

但是，在React容器中，当我尝试映射this.props.books时，除非我传入book[0].title，否则它不输出任何内容，然后这只返回第一本书，因为我指定了第一个元素，但我不知道为什么地图不起作用。

（我正在容器的this.props.books方法中登录到控制台render()。输出是两个数组，第二个数据输入，如下所示：

[]
[Array[2]]
    0: Array[2]
        0: Object
        1: Object

我的完整容器如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { fetchBooks } from '../actions/index';

class BookList extends Component {
    componentDidMount() {
        this.props.fetchBooks()
    }

    render() {
        console.log(this.props.books);
        /*
            Outputs to the console the following:

            []
            [Array[2]]
                0: Array[2]
                    0: Object
                    1: Obeject
        */
        return (
            <ul>
                {this.props.books.map((book) => {
                    return <li key={book.id}>{book.description}</li>
                })}
            </ul>
        );
    }
}

function mapStateToProps({books}) {
    return { books };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchBooks }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BookList);

谢谢：）

React / Redux应用程序，JSON映射不输出数据

0 个答案: