我试图映射一个来自另一个组件的 props 形式的数组，但我无法获取数据。我似乎做对了一切，但我在屏幕上看不到任何东西。
const [products, setProducts] = useState([])
const [featuredProduct, setFeaturedProduct] = useState([]);
useEffect(() => {
return ()=>{
const responseProductData = async()=>{
const result = await axios.get('/products.json')
const data = result.data;
setProducts(data)
setFeaturedProduct(products.filter(product=>product.featured===true))
}
responseProductData()};
}, [products]);
return (
<>
<Header/>
<Featured featured={featuredProduct}/>
<Product/>
</>
)
我将特色设置为特色组件的特色产品，然后在组件本身中调用 props.featured 并尝试将其映射出来但什么也没带来。在控制台中，我可以看到数组，但它一直在重新渲染。我觉得这可能是原因。
仍在努力习惯 React。
您遇到的问题是您products在效果的依赖项数组中。这意味着每次products状态改变时，效果都会重新运行。这又发生products了变化。因此，您的组件处于渲染循环中。
您可以data直接使用而不是products在效果中使用，因此您可以删除依赖项，这将修复循环。
const [products, setProducts] = useState([])
const [featuredProduct, setFeaturedProduct] = useState([]);
useEffect(() => {
const responseProductData = async()=>{
const result = await axios.get('/products.json')
const data = result.data;
setProducts(data)
setFeaturedProduct(data.filter(product=>product.featured===true))
}
responseProductData()};
}, []);
return (
<>
<Header/>
<Featured featured={featuredProduct}/>
<Product/>
</>
)
或者，如果您不需要它作为完整的有状态值，您可以从productswith 中找出特色产品useMemo。
const [products, setProducts] = useState([])
const featuredProduct = useMemo(()=>products.filter(product=>product.featured===true),[products])
useEffect(() => {
const responseProductData = async()=>{
const result = await axios.get('/products.json')
setProducts(result.data)
}
responseProductData()};
}, []);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句