用React.js设置useContext和useState的正确方法？

import React from 'react';

const MyContext = React.createContext();

import React, { useState } from 'react';
import MyContext from './MyContext';
import MyComponent from './MyComponent';

function App() {
  const [value, setValue] = useState('Hello World');

  return (
    <MyContext.Provider value={value}>
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;

import React, { useContext, useState } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const globalValue = useContext(MyContext);
  const [localValue, setLocalValue] = useState('Initial Local Value');

  return (
    <div>
      <p>Global Value: {globalValue}</p>
      <p>Local Value: {localValue}</p>
      <button onClick={() => setLocalValue('Updated Local Value')}>
        Update Local Value
      </button>
    </div>
  );
}

export default MyComponent;

// 确保在 App.js 中正确提供了 Context
<MyContext.Provider value={value}>
  <MyComponent />
</MyContext.Provider>

// 确保在 MyComponent.js 中正确导入了 Context
import MyContext from './MyContext';

// 正确的初始值
const [value, setValue] = useState('Hello World');

// 如果初始值是一个函数，确保它被正确调用
const [value, setValue] = useState(() => 'Hello World');