stackblitz 上反应应用程序的命名和默认导入问题

Question

我在 Stackblitz 上有一个示例 React 应用程序，但出现以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

代码如下：

import React from 'react';
import { useEffect, useState } from 'react';
import { MyContext } from './MyContext';
import './style.css';

export default function App() {
  const [myValue, setMyValue] = useState('');

  useEffect(() => {
    Promise.resolve('some value from promise').then((res) => {
      console.log(res);
      setMyValue(res);
    });
  }, []);

  return (
    <MyContext.provider value="{{myValue}}">
      <div>
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </div>
    </MyContext.provider>
  );
}

如你所见（见下文link），我没有混合使用default和named 导入但我仍然收到上述错误...

这是 stackblitz 上的完整应用程序：

https://stackblitz.com/edit/react-xkxhxk?file=src/App.js

如果我注释掉 <MyContext.provider 标签，则该应用程序可以运行。错误消息似乎具有误导性。

有人可以帮忙吗？

Answer 1

应该是<MyContext.Provider>不是<MyContext.provider>

stackblitz 上反应应用程序的命名和默认导入问题

Issue with named and default imports on react app on stackblitz

reactjs

react-context