警告：<Context>不支持直接渲染，并将在未来的主要版本中删除

Question

当我使用嵌套上下文时，我有这个问题，当我只使用一个上下文时，它工作得很好。这是codesandbox的链接，你可以重现这个问题:演示

App.js

import Demo1 from './demo1'
import {createContext} from 'react'
export const NumCxt = createContext(0)
export const UpdateNumCxt = createContext(null)
export default function App() {
return (
<div className="App">
<Demo1/>
</div>
);
}

demo1.jsx

import React from 'react'
import { useContext, useState, createContext } from 'react';
import {NumCxt, UpdateNumCxt} from './App'
function Demo1() {
const [num, updateNum] = useState(3)
return (
<>
<UpdateNumCxt value={updateNum}>
<NumCxt.Provider value={num}>
<Middle/>
</NumCxt.Provider>
</UpdateNumCxt>
</>
)
}
...
...
...

Answer 1

您可能想使用<UpdateNumCtx.Provider>而不是<UpdateNumCtx>。