使用打字稿，类型“X”不可分配给类型“Y”

Question

我是 TS 的新手，我尝试将它与上下文 API 一起使用，但遇到了这个问题：当我尝试在提供程序中传递值时，我最终遇到了这个问题：

“类型 '{ Players: Player[]; }' 不可分配给类型 'Player[]'。
对象文字只能指定已知属性，并且类型 'Player[]' 中不存在 'players'。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 }( type { players: Player[]; }) 而不是players( of type Player[]) 作为值传递给上下文提供者。

你应该更换：

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

经过：

<PlayerContext.Provider value={players}>