При обращении к полю получаю undefined

Рейтинг: 0Ответов: 1Опубликовано: 08.05.2023

Использую реакт и редакс. Есть 2 файла: bookContainer и bookReducer. Содержимое bookContainer

import React from 'react'
import { borrow_book } from '../redux_library/bookActions'
import { connect } from 'react-redux'



const BookContainer = (props) => {
    console.log(props)
  return (
    <div>
      <h1>Library</h1>
        <br />
        <h2></h2>
    </div>
  )
}

const mapStateToProps=(state)=>{
    return{
        numberOfBooks: state
    }
}
// map dispatch to props
const mapDispatchToProps = (dispatch)=>{
    return {
        // eslint-disable-next-line no-undef
        borrow_book: () => dispatch(borrow_book())
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(BookContainer)

Содержимое bookReducer:

import { BORROW_BOOK, RETERN_BOOK } from './booktypes'
const initialState = {
    numberOfBooks: 105
}

const bookReducer = (state = initialState, action) => {
    // eslint-disable-next-line default-case
    switch (action.type) {
        case BORROW_BOOK: return {
            ...state,
            numberOfBooks: state.numberOfBooks - 1
        }
        case RETERN_BOOK: return {
            ...state,
            numberOfBooks: state.numberOfBooks + 1
        }
        default: return { state }
    }
}

export default bookReducer

И вот в bookContainer пытаюсь через connect обратиться к начальному состоянию, то есть кол-во книг в initialState.

Если положить в mapStateToProps return {numberOfBooks: state} - в консоли вижу объект:

numberOfBooks: 
state: {numberOfBooks: 105}
[[Prototype]]: Object

А если как return {numberOfBooks: state.numberOfBooks}, получаю numberOfBooks: undefined

Почему поле пропадает и становится undefined, если я его вижу?

javascript reactjs jsx redux
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

надо исправить default: return { state }: (PS возможно это связано возможно нет с ошибкой)

вместо того что бы вернуть { numberOfBooks: 105 } вы возврашаете { state: { numberOfBooks: 105 } }

const a = { name: 'xy' }
const b = { a }

b => { a: { name: 'xy' } }

надо

const b = { ...a } либо b = a

по дефолту не надо нечего делать то есть вернуть как есть:

default: return state