如何将数据传递给功能组件？

Question

作为React课程的一部分，我正在制作一个虚拟电子商店，并希望将产品从一个组件的状态传递到功能组件并在那里显示产品属性。如何将数据从状态传递到无状态组件？

我设置了一个组件ProductList，它存储产品（从api获取）和ProductDetail，它应该显示详细信息（通过id找到产品并显示它的描述、img等）。我设置了一个pp.js，它有两个路由-列表和详细信息。

pp.js：

class App extends Component {
  render() {
    return (
      <div>
        <h1>E-Commerce app</h1>
        <Route exact path="/" component={ProductList} />
        <Route path="/:productId" component={ProductDetail} />
      </div>
    )
  }
}

ProductList。js公司：

class ProductList extends Component {
  state = {
    isLoading: true,
    products: [],
  }

  async componentDidMount() {
    const products = await getProducts()

    this.setState({ products: products.data, isLoading: false })
  }

  render() {
    const { isLoading, products } = this.state
    return (
      <div>
        {isLoading && '...'}
        {products && (
          <ul>
            {products.map(item => (
              <li key={item.id}>
                <Link to={`${item.id}`}>
                  <h2>{item.attributes.name}</h2>
                  <img
                    src={item.attributes.image_url}
                    width="60"
                    alt={item.attributes.description}
                  />
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    )
  }
}

产品Detail.js：

const ProductDetail = ({ match }) => {
  return (
    <div>
      <p>Product ID: {match.params.productId}</p>
      <img src="" alt="" />
      <p>Product name: </p>
      <p>Product description: </p>
    </div>
  )
}

Answer 1

第一次更改链接如下

<Link to={{
  pathname: `${item.id}`,
  state: {
    productObject: item
  }
}}>

然后更改ProductDetail组件参数。

const ProductDetail = ({ match,location })

最后请像这样阅读产品名称。

<p>Product name:{location.state.productObject.attributes.name} </p>

如果有帮助，请告诉我。

谢谢

Answer 2

您将需要在详情页/： productId上提出另一个请求。

请记住，如果用户直接转到productId路由，则产品数据将不存在，这就是您需要在此处请求的原因。

要进行优化，您可以使用上下文或像Redux这样的库来管理/存储数据。因此，在执行新请求之前，您可以首先检查存储中是否存在productId的数据。

Answer 3

您的数据处于ProductList组件的状态，据我所知，您希望在单击链接后在另一个组件中显示一个产品详细信息，对吗？

切换路由时，组件将卸载，因此会丢失数据。

为了做到这一点，您需要进行一些状态管理，如Redux、MobX或其他状态管理库，或者您可以使用上下文API，这是最近在React中引入的一个特性。