如何将数组值传递给React子组件？传递brand.title至BrandDetail问题求助

你当前在父组件BrandsList的遍历逻辑中直接渲染了<BrandDetail />组件，所以每个品牌条目下都会直接加载子组件内容，这是不符合预期的直接原因。

第一步：修改父组件代码 #

删除遍历逻辑中的<BrandDetail brandName={brand.title} />这一行，仅保留跳转链接即可。如果选择通过路由state传递品牌名称无需二次请求，可以给Link组件添加state参数：

class BrandsList extends React.Component {
  state = {
    brands: [],
  };

  fetchBrands = () => {
    axios.get('http://127.0.0.1:8000/api/brands/').then((res) => {
      this.setState({
        brands: res.data,
      });
    });
  };

  componentDidMount() {
    this.fetchBrands();
  }

  render() {
    return (
      <div style={{ margin: 22 }}>
        {this.state.brands.map((brand) => (
          <div key={brand.id}>
            {/* 这里添加state参数传递品牌名称 */}
            <Link to={`/brands/${brand.id}`} state={{ brandName: brand.title }}>{brand.title}</Link>
            {/* 删除原来的BrandDetail渲染行 */}
          </div>
        ))}
      </div>
    );
  }
}

export default BrandsList;

第二步：配置路由规则 #

你需要在React Router的路由配置中，给/brands/:brandId路径绑定BrandDetail组件，确保点击跳转后能加载对应的独立页面，以React Router v6为例：

import { Routes, Route } from 'react-router-dom';
import BrandsList from './BrandsList';
import BrandDetail from './BrandDetail';

function App() {
  return (
    <Routes>
      <Route path="/brands" element={<BrandsList />} />
      <Route path="/brands/:brandId" element={<BrandDetail />} />
    </Routes>
  );
}

第三步：修改子组件接收参数 #

有两种参数接收方式可选：

方式1：读取路由state的参数（无需二次请求） #

如果是函数组件可以直接用useLocation钩子：

import React from 'react';
import { useLocation } from 'react-router-dom';
import MyLayout from '../MyLayout/MyLayout';

const BrandDetail = () => {
  const location = useLocation();
  const brandName = location.state?.brandName;
  return (
    <MyLayout>
      <div>当前是 {brandName} 的详情页</div>
    </MyLayout>
  );
}
export default BrandDetail;

如果要保留类组件写法，可以用withRouter高阶组件包裹：

import React from 'react';
import { withRouter } from 'react-router-dom';
import MyLayout from '../MyLayout/MyLayout';

class BrandDetail extends React.Component {
  render() {
    const brandName = this.props.location.state?.brandName;
    return (
      <MyLayout>
        <div>当前是 {brandName} 的详情页</div>
      </MyLayout>
    );
  }
}
export default withRouter(BrandDetail);

方式2：通过路由ID查询品牌信息（刷新页面参数不丢失） #

如果担心页面刷新后state参数丢失，可以通过路由中的品牌ID发起请求查询详情，或者从全局缓存的品牌列表中匹配对应的品牌名称：

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import MyLayout from '../MyLayout/MyLayout';

const BrandDetail = () => {
  const { brandId } = useParams();
  const [brandName, setBrandName] = useState('');

  useEffect(() => {
    // 也可以从全局状态/父组件缓存的brands数组中匹配对应id的品牌标题
    axios.get(`http://127.0.0.1:8000/api/brands/${brandId}/`).then(res => {
      setBrandName(res.data.title);
    })
  }, [brandId]);

  return (
    <MyLayout>
      <div>当前是 {brandName} 的详情页</div>
    </MyLayout>
  );
}
export default BrandDetail;

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