無法為單個物件運行唯一的迭代

我正在嘗試在頁面上顯示 25 個條目（name、company、skill等），但無法獲取唯一資訊。

即我只能一遍又一遍地看到第一個條目。我不確定如何重申新資訊，因為它只會是response.data.students[0].

這就是我的代碼現在的樣子，映射在哪里：

export default function StudentList() {
  let [loaded, setLoaded] = useState(false);

  let [students, setStudent] = useState(" ");
  function doInfo(response) {
    console.log(response.data);
    setStudent(response.data.students);
    setLoaded(true);
  }

  if (loaded) {
    return (
      <div className="StudentList">
        <div className="row">
          <div className="col">
            {students.map(function (data, index) {
              return <StudentInfo data={data} key={index} />;
            })}
          </div>
        </div>
      </div>
    );
  } else {
    let url = "https://api.hatchways.io/assessment/students";
    axios.get(url).then(doInfo);
  }
}

以下是 StudentInfo 組件的編碼供參考：

export default function StudentInfo() {
  const [info, addInfo] = useState(" ");

  function setInfo(response) {
    addInfo({
      number: response.data.students[0].id,
      first: response.data.students[0].firstName,
      last: response.data.students[0].lastName,
      email: response.data.students[0].email,
      company: response.data.students[0].company,
      skill: response.data.students[0].skill,
      average: response.data.students[0].grades[0],
    });
  }

  let url = "https://api.hatchways.io/assessment/students";
  axios.get(url).then(setInfo);

  return (
    <div className="StudentInfo">
      <h1>{info.number}.</h1>
      <h2>
        Name: {info.first} {info.last}
      </h2>
      <h2>Email: {info.email}</h2>
      <h2>Company: {info.company}</h2>
      <h2>Skill: {info.skill}</h2>
      <h2>Average: {info.average}</h2>
    </div>
  );
}

有人可以幫我撰寫代碼，讓它遍歷所有 25 個條目，而不僅僅是第一個嗎？

uj5u.com熱心網友回復：

您需要設定key按map功能呈現子級。

否則，Reactjs 將不知道應該準確更新哪個專案。

           {students.map(function (data, index) {
              return <StudentInfo data={data} key={index} />;
            })}

uj5u.com熱心網友回復：

嘗試這樣的事情：

• 將陣列設定為狀態
• useEffect(..., []) 觸發資料加載（僅一次）。
• 在映射的陣列擴展上設定 key={id} （或出于不適用于此特定情況的充分理由做出反應抱怨）。

function StudentList() {
  const [students, setStudents] = useState(null);
 
  useEffect(() => {
    const url = "https://api.hatchways.io/assessment/students";
    axios.get(url).then(({ data: { students } }) => setStudents(students));
  }, []);

  if (!students) {
     return ( <div>loading...</div> );
  }

  return (
    <div className="StudentList">
      <div className="row">
        <div className="col">
          { students.map(student => ( <StudentInfo key={student.id} info={student} /> )) }
        </div>
      </div>
    </div>
  );
}

并且StudentInfo不需要重新加載任何東西，只需格式化已經獲取的資料

export default function StudentInfo({ props: { info } }) {
  return (
    <div className="StudentInfo">
      <h1>{info.number}.</h1>
      <h2>
        Name: {info.first} {info.last}
      </h2>
      <h2>Email: {info.email}</h2>
      <h2>Company: {info.company}</h2>
      <h2>Skill: {info.skill}</h2>
      <h2>Average: {info.average}</h2>
    </div>
  );
}

uj5u.com熱心網友回復：

您的子組件 (StudentInfo) 沒有使用您的父組件傳遞的資料。不要再次呼叫 API 來獲取學生資訊，而是使用 prop。

export default function StudentInfo({ data }) {
  const info = {
    number: data.id,
    first: data.firstName,
    last: data.lastName,
    email: data.email,
    company: data.company,
    skill: data.skill,
    average: data.grades[0]
  };

  return (
    <div className="StudentInfo">
      <h1>{info.number}.</h1>
      <h2>
        Name: {info.first} {info.last}
      </h2>
      <h2>Email: {info.email}</h2>
      <h2>Company: {info.company}</h2>
      <h2>Skill: {info.skill}</h2>
      <h2>Average: {info.average}</h2>
    </div>
  );
}

標籤：javascript 反应 反应钩子 jsx

上一篇：表單控制元件將值作為物件陣列獲取

下一篇：按條件Reactjsx更改按鈕標題