Блог

Главная - Вопросы по программированию - Отрисовано больше крючков, чем во время предыдущего рендеринга. Ошибка реагирования

Отрисовано больше крючков, чем во время предыдущего рендеринга. Ошибка реагирования

#javascript #reactjs

Вопрос:

Попытка загрузить данные из внутреннего API в функциональный компонент и установить переменную состояния chartdata в данные ответа.

Не совсем понимая хуск и то, как они загружаются — я застрял и перепробовал много вещей. Это мой текущий код, который возвращает Rendered more hooks than during the previous render. ошибку:

 const fetcher = (url) => fetch(url).then((res) => res.json())

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function Home () {

  const [session, loading] = useSession()


  if (loading) return null

  if (!loading amp;amp; !session) {
    return <>
      <p>Not signed in</p>
      <button onClick={() => signIn()}>Sign in</button>
    </>
  }

  const [chartData, setChartData] = useState({data:{}});

  const classes = useStyles();

  let { data, error } = useSWR('/api/bookings/years/6', fetcher) //returning data correctly

  if (error) return <div>Failed to load: {error}</div>
  if (!data) return <div>Loading...</div>

  useEffect(() => {
    setChartData(data);
  }) //this is causing the error

  const items = [
    <MonthOverMonth data={chartData.data} width={'600px'}/>,
    <YearOverYearLine data={chartData.data} width={'600px'}/>,
    <ByMachine data={chartData.data} width={'600px'} machine={'M-1'}/>,
    <ByMachine data={chartData.data} width={'600px'} machine={'X-1 Mini'}/>,
    <ByMachine data={chartData.data} width={'600px'} machine={'X-1'}/>,
  ]

  const gridItems = items.map(item => {
    return <Grid item>{item}</Grid>
  })


  return <>
    <Head>
      <title>Sales Dashboard</title>
    </Head>
    {session amp;amp; <>
      <div className={classes.root} id="charts">
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" className={classes.title}>
              Dashboard
            </Typography>
            <Button color="inherit" onClick={() => signOut()}>Sign Out</Button>
          </Toolbar>
        </AppBar>
      <div style={{ padding: '25px' }}>
        <SyncButton />
        <Grid container spacing={3}>
          {gridItems}
        </Grid>
      </div>
      </div>
    </>
    }
  </>

}

Как правильно обновить состояние возвращаемых данных?

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

1. дает тот же результат

Метки: ,