類型“X”不可分配給帶有打字稿的“Y”類型

Question

我是 TS 新手，我嘗試將它與上下文 API 一起使用，但是我遇到了這個問題：當我嘗試在提供程序中傳遞值時，我最終遇到了這個問題：

“類型'{玩家：玩家[];}'不可分配給類型'玩家[]'。
對象字面量只能指定已知的屬性，而 'players' 不存在於類型 'Player[]'.ts(2322)"

這是我的代碼：

interface Player {
  players: [];
}

type WithChildren<T = {}> = T & { children: JSX.Element };

const PlayersProvider = ({ children }: WithChildren) => {
  const [players, setPlayers] = useState<Player[]>([]);
  useEffect(() => {
    axios.get<{ players: Player[] }>(baseUrl + "/players").then((response) => {
      setPlayers(response.data.players);
    });
  }, []);

  return (
    <PlayerContext.Provider value={{ players }}>
      {children};
    </PlayerContext.Provider>
  );
};

當我在組件中使用它時它運行良好，但由於我在上下文提供程序中外部化它壞了。 有人可以解釋我有什么問題嗎？

Answer 1

似乎您將{ players } { players: Player[]; } { players } （類型為{ players: Player[]; } ）而不是players （類型為Player[] ）作為值傳遞給上下文提供者。

你應該更換：

<PlayerContext.Provider value={{ players }}>

經過：

<PlayerContext.Provider value={players}>