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

Posted 2023-04-14

【中文标题】使用多个孩子呈现的上下文消费者错误

【英文标题】：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;

【参考方案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>