array.includes() 不是函数答案

【问题标题】：array.includes() is not a functionarray.includes() 不是函数
【发布时间】：2020-01-05 09:52:43
【问题描述】：

它适用于第一次单击，但是当我再次单击它以取消选择它时，它显示错误：

state.selectedStudents.includes 不是函数。（在 'state.selectedStudents.includes(action.item)', 'state.selectedStudents.includes' 未定义）

import {
  SELECT
} from "../actions/postActionTypes";

const initialState = {
  students: ['Aditya', 'Rohan', 'Hello'],
  selectedStudents: []
}

const selectReducer = (state = initialState, action) => {


  switch (action.type) {
    case SELECT:
      return {
        ...state,
        selectedStudents: state.selectedStudents.includes(action.item) ? state.selectedStudents.splice(state.selectedStudents.indexOf(action.item), 1) : state.selectedStudents.push(action.item)
      }
      default:
        return state;
  }

}

export default selectReducer;

【问题讨论】：

请提供Minimal, Complete, and Verifiable example。

标签： reactjs react-native redux react-redux

【解决方案1】：

在任何情况下，我都不会鼓励改变 redux 状态。所以这是我的建议

const selectReducer = (state = initialState, action) => {
  switch (action.type) {
    case SELECT: {
      let selectedStudents = [...state.selectedStudents];

      if (!_.isEmpty(selectedStudents) && selectedStudents.includes(action.item)) {
        const itemIndex = selectedStudents.indexOf(action.item);
        selectedStudents = selectedStudents.splice(itemIndex, 1);
      } else {
        selectedStudents.push(action.item);
      }

      return {
        ...state,
        selectedStudents,
      };
    }
    default:
      return state;
  }
};

【讨论】：

【解决方案2】：

首先state.selectedStudents.includes is not a function. 表示state.selectedStudents 不是一个数组。那是什么？

.push() 不返回数组，它返回推入后数组的长度。基于MDN:

Array.push() 返回值：调用该方法的对象的新 length 属性。

所以在第一个SELECT 操作之后，您的状态会变为：

state = {
  students: ['Aditya', 'Rohan', 'Hello'],
  selectedStudents: 1, // <- it's a number, not an array.
}

第二次触发 SELECT 动作时，state.selectedStudents.includes(action.item) 会抛出错误，因为 state.selectedStudents 是 1，它不是数组。

将您的开关盒更改为：

switch (action.type) {
  case SELECT:
    return {
      ...state,
      selectedStudents: state.selectedStudents.includes(action.item) ?
        state.selectedStudents.filter(student => student.id !== action.item.id) :
        [...state.selectedStudents, action.item] // <- no mutation, creates a new array.
    }
  default:
    return state;
}

【讨论】：

你还在用splice在这里改变原始状态。
你说得对，我关注的是.push()，没有关注'.splice()`。更新答案，谢谢！

【解决方案3】：

state.selectedStudents.push(action.item)

返回数组的新长度，不是列表。所以下次你尝试的时候类型号没有includes方法。

【讨论】：

【解决方案4】：

你直接改变了你的状态。而不是 splice 和 push 使用 filter 和数组扩展运算符：

switch (action.type) {
  case SELECT:
    return {
      ...state,
      selectedStudents: state.selectedStudents.includes(action.item)
        ? state.selectedStudents.filter(
            student => student.id !== action.item.id
          )
        : [...state.selectedStudents, action.item]
    };
  default:
    return state;
}

【讨论】：