不能在对象字面量中使用像 .includes 这样的数组函数

问题描述

我试图在由数组组成的对象文字中组织我的反应状态。

const [state,setState] = React.useState({ filter: [],other: [] });

我想在点击列表项时更新我的​​过滤器数组。

    const handleListItemClick = (event,index) => {
    if (state['filter'].includes(index)) {
        setState(state['filter'].filter(function (element) {
            return element != index;
        }))
    } else {
        setState(state['filter'].concat([index]));
    }
};

但是每当我尝试访问过滤器数组时，java 脚本都无法解析包含或 indexOf 之类的数组函数，例如：

<ListItem
          button
          selected={state['filter'].includes(0)}
          onClick={(event) => handleListItemClick(event,0)}>
                <ListItemText primary="Kundensegmente" />
</ListItem

我收到此错误：

未捕获的类型错误：state.filter.includes 不是函数

使用 include 之类的函数似乎可以在一维数组中使用。

解决方法

状态的原始形状是这样的：

{ filter: [],other: [] }

但后来你改变了它：

setState(state['filter'].concat([index]));

您用值 fiter（一个空数组）替换了 whole 状态，该值与新数组 [index] 相连。

那个新数组没有 filter 属性。

---

对 filter 和 other 使用不同的状态。

const [filter,setFilter] = React.useState([]);
const [other,setOther] = React.useState([]);

---

或者，如果您真的希望将它们合并为一个对象，那么您需要在状态中保持该对象的形状。

创建一个与旧对象相同的新对象，除了只是要更改的位。

setState({
    ...state,filter: state.filter.concat([index]);
});