реквизит работает в консоли, но не рендеринг на переднем конце - React - PullRequest
Новая
       5

реквизит работает в консоли, но не рендеринг на переднем конце - React

0 голосов
/ 10 мая 2018

Я работаю над реагирующим приложением, и я получаю эту странную ошибку, в которой я пытаюсь показать значение реквизита на внешнем интерфейсе, но оно ничего не показывает, однако, если я пытаюсь console.log значение этихреквизит, я получаю правильные значения.Вот мой код. 

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

class BookList extends Component{

    renderBooks = () => {
        if( this.props.books.length === 0 ){
            console.log("No books");
            return <p>Getting books...</p>
        }else{
            console.log( this.props.books[0].id );
            return <h2> { this.props.books[0].id }</h2>//this.props.books.map(( book ) => {
            //     return (
            //         <div key={ book.id }>
            //             <h2>{ book.title }</h2>
            //             <h2>{ book.description }</h2>
            //             <h3>{ book.price }</h3>
            //         </div>
            //     )
            //});
        }
    }
    render(){
        return(
            <div>
                { this.renderBooks() }
            </div>
        )
    }
}

function mapStateToProps( state ){
    return {
        books: state.books.books
    }
}

export default connect( mapStateToProps )(BookList);

Функция карты тоже не работает.В консоли я получаю правильное значение реквизита, и когда я пытаюсь проверить HTML-элемент этого <div>, я получаю следующее. 

<div>
    <h2></h2>
</div>

Ничего в теге.Почему это происходит и как я могу это исправить?

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Не уверен, как выглядит ваш родительский компонент, но вот краткий пример вашего компонента https://codesandbox.io/s/w263l83y1k

0 голосов
/ 10 мая 2018

Проблема с вашим редуктором

замените ваш bookReducer на приведенный ниже код для работы 

export function booksReducers( state = { books:[] }, action ){
switch( action.type ){

    case "POST_BOOK":
        return Object.assign({}, state, {
            books: action.payload
        })
        break;

    case "DELETE_BOOK":
        return Object.assign({}, state, {
            books: state.books.filter(book => {
                if (book.id !== action.payload.id) {
                    return true
                }
            })
        })
        break;

    case "UPDATE_BOOK": 
    return Object.assign({}, state, {
        books: state.books.map(book => {
            if (book.id !== action.payload.id) {
                return book
            } else {
                return action.payload
            }
        })
    })
        break;
}

return state;
}
0 голосов
/ 10 мая 2018

Как насчет отладки таким образом? 

let dummyBooks = [
  { id: 1, title: 't1', description: 'd1', price: 1 },
  { id: 2, title: 't2', description: 'd2', price: 2 },
];

return dummyBooks.map(( book ) => {
   return (
       <div key={ book.id }>
          <h2>{ book.title }</h2>
          <h2>{ book.description }</h2>
          <h3>{ book.price }</h3>
       </div>
   )
});

если все в порядке - тогда ошибка определенно равна 

this.props.books

Может быть, это объект, а не массив?

...