将函数从上下文传递到组件以更新上下文中的状态

import React, { createContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('');

  const updateState = (value) => {
    setState(value);
  };

  return (
    <MyContext.Provider value={{ state, updateState }}>
      {children}
    </MyContext.Provider>
  );
};

export { MyProvider, MyContext };

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

const ChildComponent = () => {
  const { state, updateState } = useContext(MyContext);

  const handleClick = () => {
    updateState('New state');
  };

  return (
    <div>
      <p>Current state: {state}</p>
      <button onClick={handleClick}>Update state</button>
    </div>
  );
};

export default ChildComponent;