SolidJS中createResource调用refetch参数为undefined如何解决？

问题根源 #

• 你调用createResource时第一个参数传入了programmingOnly()，这是直接对signal求值得到的静态值，不是响应式源，createResource无法跟踪它的后续变化
• 手动调用无参数的refetch()时，不会自动传入最新的programmingOnly值，因此fetcher函数接收到的参数为undefined，导致请求异常

推荐解决方法（声明式自动请求） #

SolidJS的createResource第一个参数支持传入响应式源（比如signal本身），会自动跟踪值的变化，自动触发重新请求，完全不需要手动调用refetch：

1. 修改createResource调用，第一个参数直接传入signal本身，不要加括号求值：

const fetchJokes = async (programmingOnly) => {
  alert(programmingOnly);
  return (await fetch(`https://official-joke-api.appspot.com/jokes/${programmingOnly?'programming/':''}ten`)).json();
}
//...
// 第一个参数直接传signal函数本身，无需手动求值
const [jokes, { mutate, refetch }] = createResource(programmingOnly, fetchJokes);

2. 简化checkbox的事件逻辑，不需要手动调用refetch：

const [programmingOnly, setProgrammingOnly] = createSignal(true);
//...
Programming Only: <input type="checkbox" checked={programmingOnly()}
        onInput={()=>setProgrammingOnly(!programmingOnly())}>
</input>

可选手动调用方案 #

如果你确实需要手动控制请求触发，调用refetch时传入最新的参数值即可：

Programming Only: <input type="checkbox" checked={programmingOnly()}
        onInput={()=>{
          const newVal = !programmingOnly();
          setProgrammingOnly(newVal);
          refetch(newVal); // 手动传入最新参数
        }}>
</input>

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