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") 来检查。

一切似乎都应该有效。

Answer 1

But the actual product objects never get instantiated

map() 需要 return <Product />.

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

或

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

React 组件未被实例化

React components not being instantiated

reactjs

graphql

next.js