时间戳

首页 > 解决方案 > 如何使用 AppContext (React.js) 获取数组中所有键的值

reactjs - 如何使用 AppContext (React.js) 获取数组中所有键的值

问题描述

我有一个项目，我需要从 js 文件中获取数据并在 Checkbox.Group (antd) 中使用它。

我已经在 React 中待了几天，而 javascript 也只是不知道，帮助

import React, { useState, useContext } from 'react'
import { Menu, Button,Dropdown, Checkbox } from 'antd'
import {AppContext} from '../../../context/main'

const Name = () => {
    const [visible, setVisible] = useState(false)
    const {preschool} = useContext(AppContext)
    const menu = (
        <Menu className="dropdown-menu">
            <Checkbox.Group
                // onChange={(v) => setLabels(v)}
                options={preschool.Наименование}
                className="checkboxGroup"
            />
            <Button size="large">Сбросить</Button>
            <Button size="large">Сохранить</Button>
        </Menu>
    )
    return (
        <Dropdown 
            overlay={menu}
            visible={visible}
            onVisibleChange={(val) => setVisible(val)}
        >
            <Button 
                className="button" 
                ghost={true}
            >
                Наименование
            </Button>
        </Dropdown>
    )
}
export default Name

它是 main.js 文件

const preschool_data = [
  {
    Наименование: 'ГККП "ясли сад №1',
    Язык_Обучения: 'Русский',
    Форма_учереждения: 'Государственная',
    'Проектная мощность': '190',
    'Фактическая наполненность': '240',
    '%': '126%',
    Наполненность: '',
    KPI: 'red',
    Рейтинг: '9.73',
  }

标签： reactjs

解决方案

你得到什么错误？

以防万一，请检查以下内容：

1）确保AppContext引用上下文而不是提供者：

const AppContext = createContext()

2）在您的提供者中，确保它是value而不是valueS：

<AppContext.Provider value={{ preschool }}>

推荐阅读