SolidJS v1.7.x使用setState报错：Uncaught TypeError: l is not iterable

你遇到的l is not iterable错误，根源是调用setState的方式不符合SolidJS Store的API规范。

核心错误点 #

createStore返回的setState函数不需要把state作为第一个参数传入。你之前的写法setState(state, l => [...l, ...])会把state当成路径参数解析，导致更新器函数的参数l并非当前的数组状态，自然无法被解构迭代。

分场景解决 #

场景1：Store本身是数组（createStore(list)）

直接将更新器函数传给setState即可，更新器函数的参数就是当前的数组状态：

const setComplete = (e) => {
  setState(l => [...l, {id: props.toDo.id, data: props.toDo.data, status: 'complete'}]);
};

场景2：Store是包裹对象（createStore({stateList: list})）

需要指定要更新的路径（这里是stateList），再传入更新器函数：

const setComplete = (e) => {
  setState('stateList', l => [...l, {id: props.toDo.id, data: props.toDo.data, status: 'complete'}]);
};

或者通过函数式更新整个对象：

const setComplete = (e) => {
  setState(prev => ({
    ...prev,
    stateList: [...prev.stateList, {id: props.toDo.id, data: props.toDo.data, status: 'complete'}]
  }));
};

额外建议 #

如果你的需求是修改现有待办项的状态（而非新增一个complete项），可以通过数组映射找到对应id的项并更新状态，示例如下：

// Store为数组时的写法
const setComplete = (e) => {
  setState(l => l.map(item => 
    item.id === props.toDo.id ? {...item, status: 'complete'} : item
  ));
};

内容的提问来源于stack exchange，提问作者rakitin