本文旨在帮助开发者解决在使用 React Context 时遇到的数据渲染问题，特别是当尝试渲染从 Context 中获取的对象数组时，页面没有正确显示数据的情况。文章将通过分析常见错误，提供清晰的代码示例和详细的修改建议，确保读者能够成功渲染 Context 中的数据。
在使用 React Context 管理状态并渲染数据时，开发者有时会遇到数据无法正确显示的问题，尤其是在处理对象数组时。这通常不是 Context 本身的问题，而是由于在组件中使用 map 函数时出现的疏忽。下面将详细介绍一种常见错误，并提供相应的解决方案。
常见错误：map 函数未返回 JSX 元素
在使用 map 函数遍历数组并渲染 JSX 元素时，务必确保 map 函数的回调函数返回了 JSX 元素。如果回调函数没有显式返回任何内容，React 将不会渲染任何内容。
错误示例：
function App() {
const { data } = React.useContext(Context);
return (
{data.map((element) => { // 缺少 return 语句
// 错误：使用了 data.id 而不是 element.id
{element.id}
{element.descricao}
{element.edicao}
})}
);
}在上面的代码中，map 函数的回调函数体使用了花括号 {}, 但没有使用 return 语句。因此，React 无法渲染任何内容。此外，key 属性错误地使用了 data.id，正确的做法是使用 element.id，因为 element 才是当前循环的元素。
解决方案：显式返回 JSX 元素
要解决这个问题，需要在 map 函数的回调函数中显式使用 return 语句，或者使用箭头函数的隐式返回特性。同时，确保 key 属性使用的是当前元素的唯一标识符。
正确示例：
方法一：使用 return 语句
function App() {
const { data } = React.useContext(Context);
return (
{data.map((element) => {
return (
{element.id}
{element.descricao}
{element.edicao}
);
})}
);
}方法二：使用箭头函数隐式返回
function App() {
const { data } = React.useContext(Context);
return (
{data.map((element) => (
{element.id}
{element.descricao}
{element.edicao}
))}
);
}在这个修正后的代码中，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 (
{children}
)
}App.js:
import React from 'react'
import './App.css';
import { Context } from './context/globalContext';
function App() {
const { data } = React.useContext(Context);
return (
{data.map((element) => (
{element.id}
{element.descricao}
{element.edicao}
))}
);
}
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 Context 渲染数据时，特别是处理对象数组时，务必注意以下几点：
- 确保 map 函数的回调函数返回 JSX 元素。
- 使用元素的唯一标识符作为 key 属性的值。
- 仔细检查代码，避免出现拼写错误。
通过遵循这些建议，可以避免常见的渲染错误，确保 React 组件能够正确显示 Context 中的数据。
