用打字稿输入 "X' is not assignable to type "Y"

Question

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

"Type '{ players: Player[]; }' is not assignable to type 'Player[]'.
Object literal may only specify known properties, and 'players' does not exist in type '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（Player[] 类型）作为值传递给上下文提供程序。

你应该替换：

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

作者：

<PlayerContext.Provider value={players}>

用打字稿输入 "X' is not assignable to type "Y"

Type"X' is not assignable to type "Y" with typescript

reactjs

typescript

react-context