Ошибка типа: item.map не является функцией - PullRequest
0 голосов
/ 06 ноября 2019

Я использую реаги и редуксы, и я пытаюсь простой пример. Если я нажму кнопку, то число должно увеличиться на 1. Но когда я в данный момент нажму кнопку, вы увидите следующую ошибку TypeError: item.map is not a function. Есть ли проблема с моим кодом?

class Menu extends Component {
  componentDidMount() {
    this.props.getItems();
  }

  plus = () =>{
    this.props.getplus();
  }

  render() {
    const {item } = this.props.item
    return (
      <div>
        {item.map(items => {
          <buttom onClick={this.plus}> + </button>  <div>{count}</div>     
        }               
      </div>
    )
   }

 const mapStateToProps = (state) => ({
   item: state.item
 })

export default connect(mapStateToProps , { getItems, getplus }) (Menu);

itemAction.js

export const getItems = () =>{
  return {
    type: GET_ITEMS
  }
}

export const getplus = () => {
  return {
    type: PLUS_ITEMS
  }
}

Reducer.js

const initialState = {
  item: [
    {
      count:0
    },
  ],
}

export default function (state = initialState, action) {
  switch(action.type){
    case GET_ITEMS:
      return {
        ...state
      }
      default:
        return state;
   case PLUS_ITEMS:
     return {
       item: state.item.count++
     }
   }
 }

Ответы [ 4 ]

1 голос
/ 07 ноября 2019
case PLUS_ITEMS:
 return {
   item: state.item.count++
 }
}

В вашем штате нет state.item.count. state.item это массив. Исправьте это и посмотрите, исправит ли это эту ошибку.

0 голосов
/ 07 ноября 2019

Reducer.js

сделать элемент объектом вместо массива и состояния распространения.

const initialState = {
  item:{
      count:0
    },
}

export default function (state = initialState, action) {
  switch(action.type){
    case GET_ITEMS:
      return {
        ...state
      }
      default:
        return state;
   case PLUS_ITEMS:
     return {
       ...state,
       item: state.item.count++
     }
   }
 }
0 голосов
/ 07 ноября 2019

state.item [0] .count ++ должен работать, если в вашем массиве элементов есть только один объект.

0 голосов
/ 06 ноября 2019

Вам нужен корпус по умолчанию для редуктора.

case GET_ITEMS:
    return{
        ...state
    }
case PLUS_ITEMS:
     return{
item:state.item.count++
     }
default:
        return state;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...