SetState не является функцией в реакции и nextjs
Домашняя страница
"use client";
import { useState, useEffect } from "react";
import Loading from "./loading";
import Link from "next/link";
import Courses from "./components/courses";
export default function HomePage() {
const { course, setCourse } = useState([]);
const { loading, setLoading } = useState(true);
useEffect(() => {
async function fetchCourses() {
const res = await fetch("/api/courses");
const data = await res.json();
setCourse(data);
setLoading(false);
}
fetchCourses();
}, []);
if (loading) {
return <Loading />;
}
return (
<div>
<h1>Welcome to next website</h1>
<Courses courses = {course} />
</div>
);
}
Компонент
import Link from "next/link";
export default function Courses({ courses }) {
return (
<div className = "courses">
{courses?.map((course) => (
<div key = {course.id} className = "card">
<h2>{course.title}</h2>
<small>Level: {course.level}</small>
<p>{course.description}</p>
<Link href = {course.link} target = "_blank" className = "btn">
Go to course
</Link>
</div>
))}
</div>
);
}
Просто хочу получить данные из локального API, используя «useState и useEffect» на клиентской странице в nextjs, но получаю ошибку (setState не является функцией), дайте мне знать, что я здесь делаю не так. Я новичок в этом React и Nextjs
@Armen Да, у тебя опечатка. Измените код с const { course, setCourse } = useState([]); на const [course, setCourse[ = useState([]);, то же самое касается и состояния loading. Голосование за закрытие с пометкой «Не воспроизводимо или вызвано опечаткой».
@DrewReese Его ответ ниже, так что, возможно, ему следует просто принять его.
@Armen У нас проблемы с VTC, вызванные опечатками на этом сайте, поскольку они действительно помогают только ОП и не считаются ценными в долгосрочной перспективе.
@DrewReese Вы почти правы, хотя это может быть полезно для людей, которые только начинают, поскольку они могут совершать такие же или похожие ошибки.
Ответы 1
Вы неправильно устанавливаете переменную состояния и функцию установки крючка useState. Предполагается, что переменная состояния и функция установки должны быть установлены в деструктурированном массиве, а не в объекте, как вы сделали выше. Вот как вы должны объявить переменную состояния, используя хук useState:
const [ course, setCourse ] = useState([]);
const [ loading, setLoading ] = useState(true);
useEffect(() => {
async function fetchCourses() {
const res = await fetch("/api/courses");
const data = await res.json();
setCourse(data);
setLoading(false);
}
fetchCourses();
}, []);
Спасибо большое ребята за помощь, я не знал об этом.
useState возвращает массив, а не объект; вы используете неправильный синтаксис.