通过SolidJS中的道具

Question

我试图通过SolidJS进行道具时遇到了一些奇怪的事情。我使用stestore创建了一个商店，我使用context.provider通过该商店。我还具有助手函数usestore，它使我可以在组件树中的任何地方访问商店（我正在尝试使用SolidJ中的React Design模式）。我有两个组件anime.jsx（parent）和episodelist.jsx（child）。当动漫组件安装时，我将获取数据到episodelist。但是，访问episodeList的道具返回一个空代理（不确定为什么，但我认为episodeList component在商店使用store.currentanimedata上更新时不会重新渲染组件。 ）。我已经在下面附加了下面的输出。

对此的任何帮助将不胜感激。

###################################
# Anime.jsx (Parent component)
###################################
const Anime = (props) => {
  const [store, setStore] = useStore();

  const getAnimeData = async () => {
    const currentAnimeId = store.currentAnime.animeId;
    const currentAnimeData = await firebase.getAnimeData(currentAnimeId);
    setStore(
      produce((store) => {
        store.currentAnimeData = currentAnimeData;
      })
    );
  };

  onMount(() => {
    getAnimeData();
  });

  return (
    <>
      <div
        className={css`
          width: 100%;
          min-height: 20px;
          margin: 8px 0px 5px 0px;
          padding: 0px 10px;
          box-sizing: border-box;
          font-size: 20px;
          word-wrap: break-word;
          line-height: 1;
        `}
      >
        <span
          className={css`
            font-size: 20px;
            color: #e32451;
          `}
        >
          {"Watching: "}
        </span>
        {store.currentAnime.name}
      </div>
      <Search></Search>
      <EpisodeList animeData={store.currentAnimeData.episodes} />
    </>
  );
};

#####################################
# EpisodeList.jsx (child component)
#####################################

const EpisodeList = (props) => {
  console.log(props);
  console.log(props.animeData);

  ...... # UI stuff

  return (
    <div
      className={css`
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding-bottom: 5px;
        margin-top: 10px;
      `}
    >
      <ScrollActionUp onmousedown={[scroll, true]} onmouseup={onmouseup}>
        ➭
      </ScrollActionUp>
      <div
        className={css`
          width: 100%;
          height: 432px;
          box-sizing: border-box;
          padding: 10px 10px 0px 10px;
          overflow: hidden;
        `}
        ref={scrollRef}
      >
        <For each={animeData.episodes}>
          {(episode, index) => {
            return (
              <Episode status={episode.watched} episode={episode}></Episode>
            );
          }}
        </For>
      </div>
      <ScrollActionDown onmousedown={[scroll, false]} onmouseup={onmouseup}>
        ➭
      </ScrollActionDown>
    </div>
  );
};

###############
# store.jsx
###############
import { createContext, createSignal, useContext } from "solid-js";
import { createStore } from "solid-js/store";

const StoreContext = createContext();

export function ContextProvider(props) {
  const [store, setStore] = createStore({});

  return (
    <StoreContext.Provider value={[store, setStore]}>
      {props.children}
    </StoreContext.Provider>
  );
}

export function useStore() {
  return useContext(StoreContext);
}