使用ContextAPI获取笔记时UI报错但控制台响应正常的排查解决

问题描述 #

使用React ContextAPI实现组件间函数传递与笔记数据获取：

• Context中通过useState维护notes状态，定义GETchallNotes异步函数发起GET请求获取笔记，控制台可正常打印返回的JSON数据并更新notes状态
• 在Note组件中通过useContext获取上下文，使用useEffect调用GETchallNotes函数，数据已正确获取，但出现UI渲染错误

相关代码 #

Context核心代码 #

const [notes, setNote] = useState([]);

let GETchallNotes = async () => { 
  let response = await fetch(`${host}/api/notes/fetchNotes`, {
    method: "GET",
    headers: {
      "Content-Type":"application/json",
      "auth-token":authtoken,
    },
  });
  const json = await response.json(); 
  console.log(json);
  setNote(json);
};

return (
  <NoteContext.Provider
    value={{ notes, deleteNote, addNote, updateNote, GETchallNotes }}
  >
    {props.children}
  </NoteContext.Provider>
);

Note组件代码 #

import React, { useEffect } from 'react';
import { useContext } from 'react';
import NoteContext from '../context/NoteContext';
import NoteItem from './NoteItem';
import AddNote from './AddNote';

function Note() {
  const provider=useContext(NoteContext)
  const {notes, GETchallNotes}=provider;

  useEffect(()=>{
    console.log("Triggered")
    GETchallNotes();
  },[]);

  return (
    <>
      <AddNote></AddNote>
      <div className='row my-3'>
        <h2>Your Notes</h2>  
        {notes.map((item) => {
          return <NoteItem note={item}></NoteItem>
        })}
      </div>
    </>
  );
}

export default Note

错误截图 #

原因分析 #

1. 列表渲染缺失唯一key属性：React渲染列表时，必须为每个列表项提供唯一的key值，帮助React识别列表中元素的变化，避免渲染混乱或报错。当前代码中notes.map生成NoteItem时未添加key，这是最直接的报错原因。
2. Context中函数的引用稳定性问题：GETchallNotes函数在Context组件每次渲染时都会重新创建，可能导致Note组件中useEffect的依赖缺失引发闭包问题，不过从描述的数据已正确更新来看，这是次要问题，但会影响组件性能与稳定性。

修复方案 #

1. 为列表项添加唯一key #

修改Note组件中map的部分，使用笔记数据的唯一标识（比如数据库生成的_id或id字段）作为key：

{notes.map((item) => {
  return <NoteItem key={item._id} note={item}></NoteItem>
})}

注意：不要使用数组索引作为key，尤其是列表元素会发生增删改时，索引会导致渲染异常。

2. 优化Context中函数的引用稳定性 #

使用useCallback包裹GETchallNotes函数，确保其引用在依赖未变化时保持稳定，避免不必要的组件重渲染：

import { useState, useCallback } from 'react';

// ...

const GETchallNotes = useCallback(async () => { 
  let response = await fetch(`${host}/api/notes/fetchNotes`, {
    method: "GET",
    headers: {
      "Content-Type":"application/json",
      "auth-token":authtoken,
    },
  });
  const json = await response.json(); 
  console.log(json);
  setNote(json);
}, [authtoken, host]); // 添加依赖项，当这些值变化时才重新创建函数

// ...

3. 完善useEffect的依赖项 #

在Note组件的useEffect中添加GETchallNotes作为依赖，确保获取到最新的函数引用：

useEffect(()=>{
  console.log("Triggered")
  GETchallNotes();
},[GETchallNotes]);

内容的提问来源于stack exchange，提问作者Khushi Sanghvi