React中如何通过事件函数传递数组？筛选弹窗应用按钮的列表数据传递实现求助

嘿，我看你现在卡在筛选结果怎么传递给Item组件这一步了，其实核心是利用React的状态管理来把筛选后的结果和列表渲染绑定起来，我给你一步步拆解修改方案：

1. 新增筛选结果的状态变量 #

首先，我们需要一个状态来保存筛选后的列表，这样状态更新时组件会自动重新渲染列表。在你的现有useState声明下面添加：

const [filteredList, setFilteredList] = useState(locList);

初始值设为locList，保证页面加载时默认显示全部数据。

2. 将foodList改为状态变量（关键修复） #

你现在用let foodList = [[], []]声明的变量是局部变量，组件重新渲染时会被重置，而且直接修改数组不会触发React的重新渲染。所以要改成状态变量：

// 替换原来的let target; let foodList = [[], []]
const [foodList, setFoodList] = useState([[], []]);
let target;

然后修改sel_Food函数，用setFoodList来更新状态，而不是直接修改数组：

const sel_Food = (e) => {
  if (e.target.tagName === "BUTTON") {
    target = e.target.innerText;
    setFoodList(prev => {
      // 深拷贝原状态，避免直接修改
      const newFoodList = [...prev];
      if (!newFoodList[0].includes(target)) {
        newFoodList[0].push(target);
      }
      return newFoodList;
    });
  } else {
    target = e.target.parentNode.nextSibling.innerText;
    setFoodList(prev => {
      const newFoodList = [...prev];
      newFoodList[1] = target;
      return newFoodList;
    });
  }
}

3. 添加“적용”按钮的点击逻辑 #

在你的Modal_Restaurant组件内部，添加“적용”按钮，并定义点击事件来执行筛选并更新列表：

// 在Modal_Restaurant的内容最后添加按钮
<button onClick={applyFilter}>적용</button>

// 定义applyFilter函数
const applyFilter = () => {
  // 调用你的list函数生成筛选结果
  const filteredResult = list(foodList);
  // 更新筛选结果状态
  setFilteredList(filteredResult);
  // 关闭弹窗
  closeModal();
}

4. 修改Item组件的数据源 #

最后，把Item组件的rlist prop从原来的locList改成我们的filteredList，这样列表就会根据筛选结果更新：

// 原来的代码
<Item rlist={currentPosts(locList)} moveTo="restaurant" area={area} city={city}></Item>

// 修改后
<Item rlist={currentPosts(filteredList)} moveTo="restaurant" area={area} city={city}></Item>

这样修改后，当用户在筛选弹窗选择选项并点击“적용”按钮时，筛选逻辑会执行，更新filteredList状态，组件重新渲染后Item组件就会拿到最新的筛选结果，实现列表更新的需求啦。

内容的提问来源于stack exchange，提问作者C12H22O12