无法解决Uncaught TypeError报错，求助实现仓库-绘画级联过滤按钮

核心问题分析 #

你遇到的Cannot read properties of undefined (reading 'map')错误，根源在这几个点：

• 初始状态设置错误，relatedPaintings一开始就携带undefined值
• 仓库按钮没绑定点击事件，点击后完全没触发获取对应绘画的逻辑
• 第二个useEffect的依赖和请求逻辑错误，导致请求无效甚至无限循环
• 绘画列表的映射逻辑搞错了数据结构

具体修复步骤 #

1. 修正初始状态
   把relatedPaintings的初始值设为空数组，因为初始没有选中仓库，不需要加载绘画：

const [relatedPaintings, setRelatedPaintings] = useState([]);

2. 给Warehouse组件添加点击事件
   渲染仓库列表时，给每个Warehouse组件绑定点击事件，触发对应仓库绘画的请求：

{warehouseList.map((warehouse) => {
  return (
    <Warehouse 
      key={warehouse._id} 
      warehouse={warehouse} 
      onClick={() => fetchPaintingsByWarehouse(warehouse._id)} 
    />
  );
})}

3. 新增获取绘画的专用函数
   删掉原来错误的第二个useEffect，写一个函数专门根据仓库ID请求绘画：

const fetchPaintingsByWarehouse = (warehouseId) => {
  axios
    .get(`${API_BASE_URL}/${warehouseId}`)
    .then((res) => {
      setRelatedPaintings(res.data);
      console.log("获取到的绘画：", res.data);
    })
    .catch((err) => console.error("获取绘画失败：", err));
};

4. 修正绘画列表渲染逻辑
   删掉多余的paintingButtonItems变量，直接用relatedPaintings渲染，同时做空值判断：

{relatedPaintings.length > 0 ? (
  relatedPaintings.map((painting) => (
    <Painting 
      key={painting._id} 
      painting={painting} 
    />
  ))
) : (
  <ListGroup.Item>请选择一个仓库查看绘画</ListGroup.Item>
)}

5. 清理无效代码
   直接删掉这些没用的代码：

• const [_id, setID] = useState([warehouseList._id]);
• const get_id = useRef(relatedPaintings._id);
• 整个paintingButtonItems变量定义
• 第二个错误的useEffect

完整修复后的代码 #

const Separator = () => {
  const [warehouseList, setWarehouseList] = useState([]);
  const [relatedPaintings, setRelatedPaintings] = useState([]);

  useEffect(() => {
    axios
      .get(API_BASE_URL)
      .then((res) => {
        setWarehouseList(res.data);
        console.log("仓库列表：", res.data);
      })
      .catch((err) => console.error("获取仓库失败：", err));
  }, []);

  const fetchPaintingsByWarehouse = (warehouseId) => {
    axios
      .get(`${API_BASE_URL}/${warehouseId}`)
      .then((res) => {
        setRelatedPaintings(res.data);
        console.log("对应绘画：", res.data);
      })
      .catch((err) => console.error("获取绘画失败：", err));
  };

  return (
    <>
      <table>
        <thead></thead>
        <tbody>
          <tr id="adjustRow">
            <td>
              <ListGroup className="listWidth">
                <ListGroup.Item action variant="warning">
                  <strong> 仓库 </strong>
                </ListGroup.Item>
              </ListGroup>
              {warehouseList.map((warehouse) => {
                return (
                  <Warehouse
                    key={warehouse._id}
                    warehouse={warehouse}
                    onClick={() => fetchPaintingsByWarehouse(warehouse._id)}
                  />
                );
              })}
            </td>
            <td id="adjustTD">
              <ListGroup className="listWidth">
                <ListGroup.Item action variant="warning">
                  <strong> 绘画 </strong>
                </ListGroup.Item>
              </ListGroup>
              {relatedPaintings.length > 0 ? (
                relatedPaintings.map((painting) => (
                  <Painting key={painting._id} painting={painting} />
                ))
              ) : (
                <ListGroup.Item>请选择一个仓库查看绘画</ListGroup.Item>
              )}
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );
};

export default Separator;

额外注意事项 #

• 确保Warehouse组件内部正确处理了onClick事件，比如绑定到按钮或可点击元素上
• 确认API接口API_BASE_URL/{warehouseId}确实能返回对应仓库的绘画数组
• 如果绘画数据有重复需求，再考虑用Set去重，先保证基础功能正常

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