如何将返回值传递给不同的组件

Question

我试图能够在单独的子组件中加载产品（当用户从父组件上的产品列表渲染地图中单击产品时启用）。

我已经设置了一个函数来

.filter

遍历产品列表，因此仅显示索引值处的产品（与从产品列表中单击的产品 ID 相匹配）并将其返回到变量中。

在父组件中

let focussedProduct = "";

const viewProduct = (productID) => {
  focussedProduct = focusProduct.filter((e, index, array)=>{
    return index == productID
  })
  console.log(focussedProduct[0]);
};

<div className='product' key={product.id} onClick={() => viewProduct(product.id)}>

哪个控制台记录了这个，所以它在单击随机项目时返回我需要的内容：

但是，我真的很难将返回的值/数据传递给子组件以映射它并开始渲染该产品，我认为这就像传递这样的变量一样简单。

父组件

<Product 
  focussedProduct = {focussedProduct}
/>

子组件

import React, {useState} from "react";

const Product = (props) => {  
    console.log(props.focussedProduct)  
}

export default Product;    

但它没有在控制台中返回任何内容以供使用/映射。所以我猜我做错了什么，我确信这很简单，但即使在做了一些谷歌搜索之后我也没有到达那里。非常感谢您的帮助。

Answer 1

您的问题是，当您调用

viewProduct

时，您会更新

focussedProduct

但它不是状态变量，并且不会发生重新渲染。

我建议您更改该方法，不要在状态中声明过滤项，而是在渲染期间派生它们，如下所示：

export default function Form() {
  const [fname, setFName] = React.useState('');
  const [items, setItems] = React.useState(['item1', 'item2']);

  let filtered = items.filter((x) => !fname || x.includes(fname));

  return (
    <form>
      <input
        type="text"
        placeholder="fname"
        value={fname}
        onChange={(e) => setFName(e.target.value)}
      />
      {filtered.map((y) => (
        <div>{y}</div>
      ))}
    </form>
  );
}

现在您应该也可以轻松地将

filtered

作为道具传递。