ReactJS 直接渲染<Context>不受支持，将在未来的重要版本中被移除

问题描述

我试图使用上下文API在我的组件之间传递搜索查询，但是我得到了以下错误：react-dom.development.js:86 警告：不支持直接渲染，并将在未来的主要版本中被移除。您是不是想要渲染<Context.Consumer>？ 这是我的代码： 我的上下文组件：

import { createContext } from 'react';

 export const QueryContext = createContext("");`

 My context states file:
`import React, { useState } from 'react';
 import { createApi } from 'unsplash-js';
 import { QueryContext } from './context';

const State = (props) => {
    const [data, setData] = useState([]);
    const unsplash = new createApi({
        accessKey: "api_key",
      });
    const querySearch = (query) => {
            unsplash.search.getPhotos({
              query: query,
              orientation: 'portrait',
            })
              .then((json) => {
                setData(data.concat(json.response.results));
                console.log(json)
            });
          };    
    return (
        <div>
               <QueryContext.Provider value={{data,setData,querySearch}}>
            {props.children}
        </QueryContext.Provider>            
        </div>
    );
}

export default State;

和App组件中我想要来自上下文的值：

      <Container  maxW='Container.lg'>


import './App.css'
import { Heading, Container, Button, useColorMode, useColorModeValue, SimpleGrid } from '@chakra-ui/react'
import { useContext, useState } from 'react';
import ProgressiveImage from 'react-progressive-graceful-image';
import Navbar from './Components/Navbar';
import Header from './Components/Header';
import { QueryContext } from './Context/context';
import Gallery from './Components/Gallery';


function App() {
  const { colorMode, toggleColorMode } = useColorMode()
  const [pics, setPics] = useState();
  const context = useContext(QueryContext);
  const { data, setData } = context;


  console.log('hopefully this is the data:',data)
  return (
    <>
    <context >
      <>
    <Navbar/>
    <Header/>
        <Heading color={useColorModeValue('red.200','red.500')}>
          Hello World
        </Heading>
        <Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}



      </Button> 
      <Gallery/>

       </Container>
       </>
       </context>
    </>
  )
}

export default App

我尝试在各个地方寻找解决方案，但都对我无效。我确信这是一个简单的问题，但因为我在React方面是新手，所以无法弄清楚。

解决方案

尝试以下方式：

QueryContext.js

import { createContext } from 'react';

export const QueryContext = createContext();

status.js

const State = (props) => {
    const [data, setData] = useState([]);
    const unsplash = new createApi({
        accessKey: "api_key",
      });
    const querySearch = (query) => {
            unsplash.search.getPhotos({
              query: query,
              orientation: 'portrait',
            })
              .then((json) => {
                setData(data.concat(json.response.results));
                console.log(json)
            });
          };   
     return(
         <QueryContext.Provider value={data:[data,setData], query:querySearch}>
            {props.children}
        </QueryContext.Provider>
     )  
export default State

App.js

import State from './Components/State'
import ChildComponent1 from './Components/ChildComponent1'

function App(){

     render(
          <State>
               // Components in here will receive context now
               <ChildComponent1/>
          </State>
     )
}

ChildComponent1.js

import { useContext } from 'react'
import { QueryContext } from './QueryContext'

export default function ChildComponent1(){
     const { data, query } = useContext(QueryContext)
     const [dataVal, setdataVal] = data
     const queryVal = query  

     render(
      // use your states in here
     )
}