使用多个孩子呈现的上下文消费者错误答案

【问题标题】：Error of context consumer rendered with multiple children使用多个孩子呈现的上下文消费者错误
【发布时间】：2021-12-25 13:36:00
【问题描述】：

得到错误：

一个上下文消费者被渲染了多个孩子，或者一个孩子这不是一个功能。上下文消费者期望一个孩子是一个函数。如果你确实传递了一个函数，请确保没有它周围的尾随或前导空格。

起初它可以工作，但随后开始出现错误。这是一个vite + tailwindcss + react APP。我得到了无法直接渲染上下文的错误，所以我添加了消费者代码。但后来又出现了这个新错误。

这是我创建的上下文：

import React, {useState, createContext} from 'react'

// creating the food context
export const FoodContext = createContext()
export const FoodProvider = (props) => {

// state for the details
const [foods, setFoods] = useState([
{
            title: 'Dougnut',
            source: 'Delicious soft Dougnut',
            price: 500,
            imageUrl: "url('./images/pizza.jpg')",
            id: 1,
            buttonText: 'Order'
        },
        {
            title: 'Pasta',
            source:'Delicous pasta',
            price: 1500,
            imageUrl: '../images/banner.jpg',
            id: 6,
            buttonText: 'Order'
        }
    ]);

    return (
        <div>
            <FoodContext.Provider value={[foods, setFoods]}>
                {props.children}
            </FoodContext.Provider>
        </div>
    )
}

这是我用上下文包装所有内容的 main.js 文件：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom';
import './index.css'
import App from './App'
import { FoodContext } from './components/context/FoodContext';

ReactDOM.render(
   <BrowserRouter>
      <FoodContext.Consumer>
          <App />
      </FoodContext.Consumer>
    </BrowserRouter>,
  document.getElementById('root')
)

这是我的 app.js 文件：

import {Switch, Route } from 'react-router-dom';
import {FoodProvider} from "./components/context/FoodContext";
import HomePage from './components/HomePage';
import NotFound from './components/NotFound';
import Menu from './components/Menu';
import SingleFood from './components/SingleFood';

function App() {
  // const consumer = React.useContext(FoodProvider);
  return (
    <FoodProvider.Consumer>
      <div className="App">
        <Switch>
           <Route exact path='/' component={HomePage} />
           <Route path='/menu' component={Menu } />
           <Route path='/food/:id' component={SingleFood } />
           <Route path='*' component={NotFound } />
        </Switch>
      </div>
    </FoodProvider.Consumer>
  );
}

export default App;

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

我认为这里有不同的问题：

我认为您在声明提供者之前使用的是消费者。上下文消费者必须是提供者的孩子（不是直接的）。要了解应如何管理上下文，我建议您先了解一些有关 lifting state up 的知识，然后重新考虑您的实施。
您可以将您的状态传递给提供者，而无需将元素放入列表中。使用：<FoodContext.Provider value={{foods, setFoods}}> 可以让您更好地在子组件中解构上下文。
您对消费者的使用也不尊重您应该如何使用它。正如您从official documentation 中看到的那样，您应该根据消费者值插入一个对象。所以在你的具体情况下，当你想列出你的食物时，你应该有这样的东西：

 <FoodContext.Consumer>
  {
    ({ foods, setFoods }) => foods.map(food => (
      <div className="food-item">
        <h1>{food.title}</h1>
        {/*The remaining elements of your food component*/}
      </div>
    ))
  }
</FoodContext.Consumer>

【讨论】：