React Context 数据渲染失败：常见错误与解决方案-js教程-PHP中文网

React Context 数据渲染失败：常见错误与解决方案

心靈之曲

发布： 2025-10-07 13:13:17

原创

904人浏览过

react context 数据渲染失败：常见错误与解决方案

本文旨在帮助开发者解决在使用 React Context 时遇到的数据渲染问题，特别是当尝试渲染从 Context 中获取的对象数组时，页面没有正确显示数据的情况。文章将通过分析常见错误，提供清晰的代码示例和详细的修改建议，确保读者能够成功渲染 Context 中的数据。

在使用 React Context 管理状态并渲染数据时，开发者有时会遇到数据无法正确显示的问题，尤其是在处理对象数组时。这通常不是 Context 本身的问题，而是由于在组件中使用 map 函数时出现的疏忽。下面将详细介绍一种常见错误，并提供相应的解决方案。

常见错误：map 函数未返回 JSX 元素

在使用 map 函数遍历数组并渲染 JSX 元素时，务必确保 map 函数的回调函数返回了 JSX 元素。如果回调函数没有显式返回任何内容，React 将不会渲染任何内容。

错误示例：

function App() {
  const { data } = React.useContext(Context);

  return (
    <div>
      {data.map((element) => { // 缺少 return 语句
        <div key={data.id}> // 错误：使用了 data.id 而不是 element.id
          <div>{element.id}</div>
          <div>{element.descricao}</div>
          <div>{element.edicao}</div>
        </div>
      })}
    </div>
  );
}

登录后复制

在上面的代码中，map 函数的回调函数体使用了花括号 {}, 但没有使用 return 语句。因此，React 无法渲染任何内容。此外，key 属性错误地使用了 data.id，正确的做法是使用 element.id，因为 element 才是当前循环的元素。

解决方案：显式返回 JSX 元素

要解决这个问题，需要在 map 函数的回调函数中显式使用 return 语句，或者使用箭头函数的隐式返回特性。同时，确保 key 属性使用的是当前元素的唯一标识符。

正确示例：

方法一：使用 return 语句

function App() {
  const { data } = React.useContext(Context);

  return (
    <div>
      {data.map((element) => {
        return (
          <div key={element.id}>
            <div>{element.id}</div>
            <div>{element.descricao}</div>
            <div>{element.edicao}</div>
          </div>
        );
      })}
    </div>
  );
}

登录后复制

方法二：使用箭头函数隐式返回

先见AI

数据为基，先见未见

查看详情

function App() {
  const { data } = React.useContext(Context);

  return (
    <div>
      {data.map((element) => (
        <div key={element.id}>
          <div>{element.id}</div>
          <div>{element.descricao}</div>
          <div>{element.edicao}</div>
        </div>
      ))}
    </div>
  );
}

登录后复制

在这个修正后的代码中，map 函数的回调函数要么显式使用 return 语句返回 JSX 元素，要么使用箭头函数的隐式返回特性。同时，key 属性也正确地使用了 element.id。

完整代码示例

下面是一个完整的示例，包括 Context 的创建、Provider 的使用以及组件的数据渲染：

globalContext.js:

import React from 'react'

export const Context = React.createContext();

export const ContextProvider = ({ children }) => {

    var data = [{
        id: 'teste1',
        edicao: '1',
        descricao: '2',
    },
    {
        id: 'teste2',
        edicao: '1',
        descricao: '2',
    },
    {
        id: 'teste3',
        edicao: '1',
        descricao: '2',
    }]

    return (
        <Context.Provider value={{ data }}>
            {children}
        </Context.Provider>
    )
}

登录后复制

App.js:

import React from 'react'
import './App.css';
import { Context } from './context/globalContext';

function App() {
  const { data } = React.useContext(Context);

  return (
    <div>
      {data.map((element) => (
        <div key={element.id}>
          <div>{element.id}</div>
          <div>{element.descricao}</div>
          <div>{element.edicao}</div>
        </div>
      ))}
    </div>
  );
}

export default App;

登录后复制

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ContextProvider } from './context/globalContext';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>
);

登录后复制