将数组状态从一个组件更新到另一个react挂钩

import React, { useState } from 'react';

function SourceComponent() {
  const [arrayState, setArrayState] = useState([]);

  const updateArrayState = () => {
    // 更新数组状态
    setArrayState(['item1', 'item2', 'item3']);
  };

  return (
    <div>
      <button onClick={updateArrayState}>更新数组状态</button>
    </div>
  );
}

export default SourceComponent;

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

function TargetComponent() {
  const [arrayState, setArrayState] = useState([]);

  useEffect(() => {
    // 监听源组件中数组状态的变化
    // 在状态变化时进行相应的处理
    console.log('数组状态变化：', arrayState);
  }, [arrayState]);

  return (
    <div>
      <p>目标组件</p>
    </div>
  );
}

export default TargetComponent;