如何从不同的JS文件中setState一行？

// App.js
import React, { createContext, useState } from 'react';

export const MyContext = createContext();

const App = () => {
  const [state, setState] = useState('');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {/* 其他组件 */}
    </MyContext.Provider>
  );
};

export default App;

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

const ComponentA = () => {
  const { state, setState } = useContext(MyContext);

  const handleClick = () => {
    setState('New state from Component A');
  };

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

export default ComponentA;

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

const ComponentB = () => {
  const { state, setState } = useContext(MyContext);

  const handleClick = () => {
    setState('New state from Component B');
  };

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

export default ComponentB;