时间戳

首页 > 解决方案 > React 中的averagedAPI 数据已经被声明

javascript - React 中的averagedAPI 数据已经被声明

问题描述

我不断收到 SyntaxError: Identifier 'averageGrade' 已经被声明。这是与新功能相关的顶部代码（到目前为止一切正常）。

import React, { useState, useEffect } from "react";

function App() {
    const [averageGrade, setGrade] = useState([]);

 useEffect(() => {
    function fetchStudents() {
      fetch("api.location.address")
        .then(function (response) {
          return response.json();

        })
        .then(function (data) {
          setStudentList(data.students);
          setFilteredStudent(data.students);
          setGrade(data.grades);
        });
    }
    fetchStudents()
  }, []);

这是我无法弄清楚的事情。我把 setGrade([]) 'grades', 'setGrade', 'averageGrade' 放在里面，并把它留空，如图所示......

const averageGrade = grades => grades.reduce((acc,v) => acc + v) / grades.length;
    setGrade([]);

return ( 
    <Wrapper>
      <h1 className="title">STUDENTS</h1>
        <input onChange = {filterStudents}/>
      {filteredStudents.map((students) => (
        <StudentCard
          key={students.id}
          grades={students.setGrade}
        />
      ))}
    </Wrapper>
  );
}

export default App;

如果错误对您来说非常明显，请原谅我。我确实在寻找解决方案，现在我只是把头撞在桌子上。

标签： javascriptreactjs

解决方案

这应该是完整的块，

import React, { useState, useEffect } from "react";

function App() {
    const [averageGrade, setGrade] = useState([]);
    const [filteredStudent, setFilteredStudent] = useState([]);
    const [studentList, setStudentList] = useState([]);

 useEffect(() => {
    function fetchStudents() {
      fetch("api.location.address")
        .then(function (response) {
          return response.json();

        })
        .then(function (data) {
          setStudentList(data.students);
          setFilteredStudent(data.students);

          let avgGrade = grades => grades.reduce((acc,v) => acc + v) / grades.length;// create a local variable, do not set averageGrade directly

          setGrade(avgGrade);
        });
    }
    fetchStudents()
  }, []);

return ( 
    <Wrapper>
      <h1 className="title">STUDENTS</h1>
        <input onChange = {filterStudents}/>
      {filteredStudents.map((students) => (
        <StudentCard
          key={students.id}
          grades={students.setGrade}
        />
      ))}
    </Wrapper>
  );
}

export default App;

推荐阅读