Javascript react筛选嵌套键结果未定义，为async

伙计们，我正在按id过滤数组，当我想记录图片时，我随后将其放入img源中，但在过滤器中，在设置为状态之前，我可以看到结果。 这就是我所尝试的：

const ProductPage = (props) => {
  const [productData, setProductData] = useState();
  //   const [dataFiltered, setDataFiltered] = useState(false);
  const { id } = useParams();

  const filterById = async (data, id) =>
    await data.filter((item) => item.id === id);

  useEffect(() => {
    console.log(props.data);
    filterById(props.data, id).then((result) => {
      console.log("filtered data", result);
      setProductData(result);
    });
    // eslint-disable-next-line
  }, [id]);

  console.log("data", productData?.pictures);
  return (
    <Grid container>
      <Grid lg={6}>
        {productData &&
          productData.pictures &&
          productData.pictures.length > 0 && (
            <img
              style={{ height: "15rem", width: "auto" }}
              src={productData.pictures[0].src}
              alt={productData.pictures[0].title}
            ></img>
          )}
      </Grid>
    </Grid>
  );
};

constproductpage=（道具）=>{
const[productData，setProductData]=useState（）；
//const[dataFiltered，setDataFiltered]=useState（false）；
const{id}=useParams（）；
常量filterById=async（数据，id）=>
等待数据.filter（（item）=>item.id==id）；
useffect（（）=>{
控制台日志（道具数据）；
filterById（props.data，id）。然后（（结果）=>{
console.log（“过滤数据”，结果）；
setProductData（结果）；
});
//eslint禁用下一行
}，[id]）；
console.log（“数据”，productData？.pictures）；
返回(
{productData&&
productData.pictures&&
productData.pictures.length>0&&(
)}
);
};

---

它应该如何工作？您应该在父组件中处理承诺，而不是在子组件中。包装

filterById

并不像您想象的那样工作。在这里没用。