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

Question

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

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 脚本无法解析数组函数，例如 includes 或 indexOf，例如：

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

我收到这个错误：

Uncaught TypeError: state.filter.includes is not a function

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

Answer 1

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

{ filter: [], other: [] }

但后来你改变了它：

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

您将 whole 状态替换为 fiter 的值（空数组）并与新数组 [index].

连接

那个新数组没有 filter 属性。

filter 和 other 使用不同的状态。

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

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

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

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

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

Can't use array functions like .includes in Object literals

javascript

arrays

object-literal

reactjs