solidjs 中方便的修改对象与数组的值

createSignal

众所周知, React 想方便的修改 useState 中的对象或数组, 需要使用第三方库 Immer ,

immer 官方直接支持 React, 类型与智能提示都很不错,

solidjs 中有一个第三方的包.封装了 createSignal 与 Immer , 提供了更好的 ts 类型 与 智能提示

https://github.com/myWsq/solid-immer

只需要把 createSignal 改为 createImmerSignal

import { createImmerSignal } from "solid-immer";

function App() {
  const [todos, setTodos] = createImmerSignal([
    {
      id: "Solid.js",
      title: "Learn Solid.js",
      done: true,
    },
    {
      id: "Immer",
      title: "Try Immer",
      done: false,
    },
  ]);

  function handleToggle(id) {
    setTodos((draft) => {
      const todo = draft.find((todo) => todo.id === id);
      todo.done = !todo.done;
    });
  }

  function handleAdd() {
    setTodos((draft) => {
      draft.push({
        id: "todo_" + Math.random(),
        title: "A new todo",
        done: false,
      });
    });
  }

  // etc
}

createStore

如果你使用的是 createStore,

那 solidjs 官方提供了一个 与 immer 同名的 produce 方法,

直接使用无需安装第三方包,

需要注意的是 这个 produce 只适用于 createStore ,

import { createStore, produce } from "solid-js/store";

如果你用的 createSignal, 请使用 原生 immer 或 第三方 solid-immer (有更好的ts支持)

版本

solidjs 1.8.7

其他

https://github.com/solidjs/solid/issues/726

https://github.com/myWsq/solid-immer

https://github.com/immerjs/immer