useEffect在頁面重繪時失敗

我是一名初級程式員，我正在嘗試獲取一個 api 并使用 React 設定結果樣式。我的頁面在 VScode 上的初始加載和后續保存時作業正常，但是當我從瀏覽器實際重繪 頁面時，我得到了發布在影像上的錯誤，請在此處輸入影像描述：

這是我的代碼： App.js

```import React, { useEffect, useState } from 'react';
import './App.css';

import Students from './components/Students';
import styled from 'styled-components';

function App() {
  const [studentInfo, setStudentInfo] = useState({});
  const [searchResult, setSearchResult] = useState({});
  const [searchTerm, setSearchTerm] = useState('');
  useEffect(() => {
    getStudents();
  }, []);
  useEffect(() => {
    getStudents();
    console.log('useEffect');
  }, [searchTerm]);
  const getStudents = async () => {
    const url = 'https://api.hatchways.io/assessment/students';
    console.log(url);
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        searchTerm != ''
          ? setStudentInfo(filterStudents(data.students))
          : setStudentInfo(data.students);
      });
  };

    const filterStudents = (studentsArray) => {
    return studentsArray.filter((info) => {
      return (
        info.firstName.toLowerCase().includes(searchTerm) ||
        info.lastName.toLowerCase().includes(searchTerm)
      );
    });
  };
  console.log(searchTerm);

  return (
    <div className="App">
      <Students
        studentInfo={studentInfo}
        setSearchTerm={setSearchTerm}
        searchTerm={searchTerm}
      />
    </div>
  );
}

export default App;```

這是我的組件 Student.js：

```import React, { useState } from 'react';
import styled from 'styled-components';
import GradeDetails from './GradeDetails';

const Students = ({ studentInfo, searchTerm, setSearchTerm }) => {
  console.log(typeof studentInfo);
  console.log(studentInfo[0]);
  const [isCollapsed, setIsCollapsed] = useState(false);

  const handleDetails = () => {
    setIsCollapsed(!isCollapsed);
  };
  const average = (arr) => {
    let sum = 0;
    arr.map((num) => {
      sum = sum   parseInt(num);
    });
    return sum / arr.length.toFixed(3);
  };
  console.log(isCollapsed);
  return (
    <Container>
      <Input
        type="text"
        value={searchTerm}
        placeholder="Search by name"
        onChange={(e) => setSearchTerm(e.target.value.toLowerCase())}
      />
      {studentInfo?.map((student) => (
        <Wrapper key={student.id}>
          <ImageContainer>
            <Image src={student.pic}></Image>
          </ImageContainer>
          <ContentContainer>
            <Name>
              {student.firstName} {student.lastName}{' '}
            </Name>
            <Email>Email: {student.email}</Email>
            <Company>Company: {student.company}</Company>
            <Skills>Skill: {student.skill}</Skills>

            <Average>Average:{average(student.grades)}%</Average>
          </ContentContainer>
          <ButtonContainer>
            <Button onClick={handleDetails}> </Button>
          </ButtonContainer>
          {isCollapsed && <GradeDetails studentInfo={studentInfo} />}
        </Wrapper>
      ))}
    </Container>
  );
};```

每次出現錯誤時，我都會注釋掉從 studentInfo.map 開始的 Students.js 中的代碼，直到并保存，然后取消注釋并保存，一切正常。

我希望有人可以幫助我每次都完成這項作業，這樣我就不必一直坐在座位的邊緣。謝謝你，我為這個冗長的問題道歉。

uj5u.com熱心網友回復：

您正在使用一個空物件作為初始狀態studentInfo（傳遞給useStatehook 的值將用作默認值 - docs）：

const [studentInfo, setStudentInfo] = useState({});

.map僅在Arrays上受支持。useEffect因此，當組件在完成并將值studentInfo從物件更新到陣列之前渲染時，這是失敗的。嘗試將您的初始狀態交換為陣列：

const [studentInfo, setStudentInfo] = useState([]);

標籤：反应 api 使用效果

上一篇：Flutterdio重置密碼API集成不起作用

下一篇：如何通過ID選擇特定記錄以將其從串列中洗掉？