替代在删除项时等待承诺的mapArray

Question

我不想使用转换组或任何多余的代码。我只想让下面的API风格起作用。

1秒后的输出为a a 3 4 5 6，2秒后的输出为3 4 5 6。

import { render } from "solid-js/web";
import { For, createSignal, createMemo, mapArray } from "solid-js";


function make_position(_: number) {

  let [removing, setRemoving] = createSignal()

  return {
     get value() {
        return removing() ? 'a': _
     },
     async on_remove() {
        // I want `mapArray` to call this function when an item is removed, and wait on the returned promise to actually remove the item.
        setRemoving(true)
        return new Promise(resolve => {
           setTimeout(resolve, 1000);
        })
     }
  }
}

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);

  const ls = createMemo(mapArray(list1, _ => make_position(_)))

  setTimeout(() => {
    setList1([3,4,5,6])
  }, 1000)
  
  return (<>
    <For each={ls()}>{ item => 
       <span>{item.value}</span>
    }</For>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

Answer 1

跟踪信号的值就足以实现你想要的结果。For已经在内部同时使用了mapArray和createMemo，因此const ls = createMemo(mapArray(list1, _ => make_position(_)))是不必要的。

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);

  setTimeout(() => {
    setList1([3, 4, 5, 6])
  }, 1000)

  return (<>
    <For each={list1()}>
      {item =>
        <span>{item}</span>
      }</For>
  </>)
}

render(() => <Counter />, document.getElementById("app"));

您可以使用承诺来设置新的值。如果要通过网络请求接收新值，请使用资源。

type QueryParams = number;

const fetchData = (params: QueryParams) => new Promise<Array<number>>((resolve, reject) => {
  if (params === 0) {
    resolve([1, 2, 3, 4, 5]);
  }

  if (params === 1) {
    resolve([3, 4, 5]);
  }
});

function Counter() {
  const [params, setParams] = createSignal(0);
  const [data, { mutate, refetch }] = createResource(params, fetchData);

  setTimeout(() => {
    setParams(p => p + 1);
  }, 1000)

  return (
    <Show when={!data.loading} fallback={<div>Loading</div>}>
      <For each={data()}>
        {item =>
          <span>{item}</span>
        }
      </For>
    </Show>)
}

render(() => <Counter />, document.getElementById("app"));