reactjs - React 组件未实例化

Question

我有一组由 GraphQL 查询检索的数据。我可以在控制台中打印出来，我可以看到对象数组。

function ProductsPage(){
    const { data, loading, error } = useQuery(
        gql`
            query{
                getProducts(first: 25, offset: 1) {
                id
            }
            } 
    `, { errorPolicy: 'all' });

    if(loading) return <Layout><p>Loading...</p></Layout>
    if(error){ console.log(error); return <Layout><p>Error...</p></Layout>}
    if(data) { 
        console.log(data.getProducts);
        return(
            <Layout>
                <ul>
                {data.Products.map(function(item){
                    console.log(item);
                    <Product data={item}></Product>
                    })}
                 </ul>
            </Layout>
        )

    }

};

这是产品对象：

export default function Product(props){
    return(
        <div>
            <p>product:</p>
            <p>{props.data.id}</p>
        </div>
    )
}

我可以在控制台日志中看到对象数组，还可以在 map() 函数的控制台中看到每个对象都被打印出来。

但是实际的产品对象永远不会被实例化——我可以通过在其中放置一个 console.log("hello") 来检查。

一切似乎都应该起作用。

标签： reactjsgraphqlnext.js

Answer 1

但是实际的产品对象永远不会被实例化

map()将需要返回<Product />。

{data.Products.map(function(item){
  console.log(item);
  return <Product data={item} />; // return here
})}

或者

{
  data.Products.map(item => <Product data={item} />)
}