能否在单个React Context中存储两项数据？是否必须使用map实现？

• 核心结论：不需要使用map，单个React Context完全支持存储任意多项数据，你当前的写法错误是因为对React.createContext的入参规则不熟悉。
• 错误点说明：React.createContext 仅接收1个参数作为Context的默认初始值，你传入的第二个name参数会被直接忽略，不会被存入Context。
• 正确实现方案：将需要存储的多个值封装为一个对象传入createContext即可，示例代码如下：

import React from 'react';

// 所有要存的属性都放到同一个对象里作为初始值
export const RecordContext = React.createContext({
  id: 0,
  name: '',
  // 后续要新增存储项直接在对象里加属性即可
});

• 父组件传值用法（动态数据场景）：

import { useState } from 'react';
import { RecordContext } from './你的文件路径';

function Parent() {
  // 可以用state管理Context的动态值
  const [record, setRecord] = useState({
    id: 1001,
    name: '示例数据'
  });

  return (
    <RecordContext.Provider value={record}>
      {/* 内部所有子孙组件都可以访问到id和name */}
      <Child />
    </RecordContext.Provider>
  )
}

• 子组件取值用法：

import { useContext } from 'react';
import { RecordContext } from './你的文件路径';

function Child() {
  // 直接解构即可拿到多个属性值
  const { id, name } = useContext(RecordContext);
  return <div>记录ID：{id}，记录名称：{name}</div>
}

• 扩展提示：如果需要在子孙组件里修改Context的值，可以把更新函数也一起封装到传入的对象中：

// 初始值新增更新函数占位
export const RecordContext = React.createContext({
  id: 0,
  name: '',
  setRecord: () => {}
});

// 父组件Provider传值时带上更新函数
<RecordContext.Provider value={{
  ...record,
  setRecord
}}>

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