Блог

Главная - Вопросы по программированию - Следующий js: Ошибка: объекты недопустимы как дочерний элемент React (найдено: Ошибка: ответ не удался: получен код состояния 401)

Следующий js: Ошибка: объекты недопустимы как дочерний элемент React (найдено: Ошибка: ответ не удался: получен код состояния 401)

#reactjs #typescript #graphql #next.js

#reactjs #машинопись #graphql #next.js

Вопрос:

Это приложение показывает проблемы Github с graphql API.

Я ничего не менял после завершения работы приложения, но я получил эту ошибку.

Для этого проекта я использовал Next js, Typescript, Material UI, Tailwind css и GraphQL.

введите описание изображения здесь

Компонент индекса

 import React, { useState } from "react"
import { Typography, Container, makeStyles } from "@material-ui/core"
import SearchBar from "../components/SearchBar/SearchBar"
import RepositoryList from "../components/RepositoryList/RepositoryList"
import Head from "next/head"

const useStyles = makeStyles({
  title: {
    marginTop: "1rem",
    marginBottom: "1rem",
    textAlign: "center",
  },
})

const App = () => {
  const classes = useStyles()
  const [searchTerm, setSearchTerm] = useState<string>("")
  return (
    <>
      <Head>
        <title>GraphQL Github Client</title>
      </Head>
      <Container maxWidth={"sm"}>
        <div className="mt-10 mb-5">
          <Typography variant={"h3"} className={classes.title}>
            GraphQL Github Client
          </Typography>
        </div>

        <SearchBar
          className="mb-10"
          value={searchTerm}
          onChange={setSearchTerm}
        />
        <RepositoryList searchTerm={searchTerm} />
      </Container>
    </>
  )
}

export default App

Компонент RepositoryList

 import React, { useEffect, useState } from "react"
import { Typography, CircularProgress, makeStyles } from "@material-ui/core"
import { useQuery } from "@apollo/react-hooks"
import { SEARCH_FOR_REPOS } from "../../Queries/queries"
import Repository from "../Repository/Repository"

interface RepositoryListProps {
  searchTerm?: string
}
const useStyles = makeStyles({
  note: {
    marginTop: "1rem",
    textAlign: "center",
  },
  spinnerContainer: {
    display: "flex",
    justifyContent: "space-around",
    marginTop: "1rem",
  },
})

const RepositoryList: React.FC<RepositoryListProps> = ({ searchTerm }) => {
  const classes = useStyles()
  const [expandedRepo, setExpandedRepo] = useState(null)
  const { data, loading, error } = useQuery(SEARCH_FOR_REPOS, {
    variables: { search_term: searchTerm },
  })

  useEffect(() => {
    setExpandedRepo(null)
  }, [data])

  if (loading) {
    return (
      <div className={classes.spinnerContainer}>
        <CircularProgress />
      </div>
    )
  }

  if (error) {
    return (
      <Typography
        variant={"overline"}
        className={classes.note}
        component={"div"}
        color={"error"}
      >
        {error}
      </Typography>
    )
  }

  if (!data.search.repositoryCount) {
    return (
      <Typography
        variant={"overline"}
        className={classes.note}
        component={"div"}
      >
        There are no such repositories!
      </Typography>
    )
  }

  return (
    <div>
      {data.search.edges.map(
        (
          repo: { edges: { id: number } },
          i: string | number | ((prevState: null) => null) | null | any
        ) => (
          <>
            <Repository
              repo={repo}
              expanded={expandedRepo === i}
              onToggled={() => setExpandedRepo(i)}
              key={repo.edges.id}
            />
          </>
        )
      )}
    </div>
  )
}

export default RepositoryList

Компонент репозитория

 import React from "react"
import {
  ExpansionPanel,
  ExpansionPanelSummary,
  ExpansionPanelDetails,
  Typography,
  Chip,
  makeStyles,
} from "@material-ui/core"
import StarIcon from "@material-ui/icons/Star"
import PeopleIcon from "@material-ui/icons/People"
import IssueList from "../IssueList/IssueList"

const useStyles = makeStyles({
  root: {
    marginTop: "1rem",
  },
  summaryContainer: {
    flexDirection: "column",
  },
  summaryHeader: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: "1rem",
  },
  chip: {
    marginLeft: "0.5rem",
  },
})

interface RepositoryProps {
  repo: any
  expanded: boolean
  onToggled: any
}

const Repository: React.FC<RepositoryProps> = ({
  repo,
  expanded,
  onToggled,
}) => {
  const {
    node: {
      name,
      descriptionHTML,
      owner: { login },
      stargazers: { totalCount: totalStarCount },
    },
  } = repo
  const classes = useStyles()
  return (
    <ExpansionPanel
      expanded={expanded}
      onChange={onToggled}
      className={classes.root}
    >
      <ExpansionPanelSummary classes={{ content: classes.summaryContainer }}>
        <div className={classes.summaryHeader}>
          <Typography variant={"h6"}>{name}</Typography>
          <div>
            <Chip
              label={`by ${login}`}
              avatar={<PeopleIcon />}
              className={classes.chip}
            />
            <Chip
              label={totalStarCount}
              avatar={<StarIcon />}
              className={classes.chip}
            />
          </div>
        </div>
        <Typography
          variant={"caption"}
          dangerouslySetInnerHTML={{ __html: descriptionHTML }}
          component={"div"}
        />
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        {expanded amp;amp; <IssueList repoName={name} repoOwner={login} />}
      </ExpansionPanelDetails>
    </ExpansionPanel>
  )
}

export default Repository

Это мои компоненты.

Что мне следует сделать для устранения этой проблемы?

Ответ №1:

Похоже, проблема в этом месте, где вы делаете {error} . Я бы дважды проверил, что такое ошибка на самом деле, но похоже, что это объект, а не строка, как вы ее используете

       <Typography
        variant={"overline"}
        className={classes.note}
        component={"div"}
        color={"error"}
      >
        {error}
      </Typography>

Комментарии:

1. Спасибо, но я изменил токен GitHub, и теперь он работает нормально.

2. Вы захотите обновить эту строку при получении ошибки, потому что она снова приведет к сбою