Question

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

我已经建立了一个组件ProductList，用于存储产品（从api获取）和ProductDetail，该组件应显示详细信息（按ID查找产品并显示descr，img等）。我已经设置了App.js，它具有两条路线-到列表和到细节。

App.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>
    )
  }
}

ProductDetail.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

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

切换路线时，您的组件将卸下，因此会丢失数据。

为此，您需要执行某些状态管理，例如Redux，MobX或其他状态管理库，或者可以使用Context API，这是React最近引入的功能。

Answer 2

您将需要在详细信息页面/:productId上再次请求。

请记住，如果用户直接进入/:productId路线，则产品数据将不存在，这就是为什么您需要在此处进行请求的原因。

要进行优化，可以使用Context或Redux之类的库来管理/存储数据。因此，在发出新请求之前，您可以先检查productId的数据是否在商店中。

Answer 3

先更改链接，如下所示

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

然后更改 ProductDetail 组件参数。

const ProductDetail = ({ match,location })

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

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

让我知道是否有帮助。

谢谢

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

3 个答案: