Javascript 函数中调用的React钩子_Javascript_Reactjs

Javascript 函数中调用的React钩子

javascript reactjs

Javascript 函数中调用的React钩子,javascript,reactjs,Javascript,Reactjs,我是新手，我试图通过做项目来学习js，我正在用项目构建基本的ecom ui 我试图创建一个篮子来将物品添加到购物车中，但我遇到了这个问题在函数“product”中调用React Hook“useStateValue”，该函数既不是React函数组件，也不是自定义React Hook函数React hooks/rules of hooksComponent，也不是自定义React Hook函数 import React from 'react'; import "./Product.c

我是新手，我试图通过做项目来学习js，我正在用项目构建基本的ecom ui 我试图创建一个篮子来将物品添加到购物车中，但我遇到了这个问题

在函数“product”中调用React Hook“useStateValue”，该函数既不是React函数组件，也不是自定义React Hook函数React hooks/rules of hooksComponent，也不是自定义React Hook函数

import React from 'react';
import "./Product.css"
import { useStateValue } from "./StateProvider";


function product({id,title,image,price,rating}) {
const [{basket},dispatch] = useStateValue();

const addToBasket = () => {
    dispatch({
        type: "ADD_TO_BASKET",
        item:{
            id:id,
            title:title,
            image:image,
            price:price,
            rating:rating
        },
    })
};

return (
    <div className="product">
    <div className="product__info" >
       <p>{title}</p>
      
       <p className="product__price">
       <small>$</small>
       <strong> {price} </strong>
        </p>
        <div className="product__rating"> 
        {Array(rating)
        .fill( )
        .map((_) => ( 
            <p>-</p>
        ))}
        </div>
        </div>
        <img src={image} alt=""/>
        <button  onClick={addToBasket} className="product__button"> Add to basket </button>
    </div>
);
}

   export default product

从“React”导入React；
导入“/Product.css”
从“/StateProvider”导入{useStateValue}；
功能产品（{id，title，image，price，rating}）{
const[{basket}，dispatch]=useStateValue（）；
常量addToBasket=（）=>{
派遣({
键入：“将_添加到_篮中”，
项目：{
id:id，
标题:标题,，
图像：图像，
价格：价格，
评级：评级
},
})
};
返回(
{title}

$
{price}

{数组（额定值）
.fill（）
.map（（)）=>（
-
))}
加入篮子
);
}
导出默认产品

import React from 'react';
import "./Product.css"
import { useStateValue } from "./StateProvider";




 function product({id,title,image,price,rating}) 
  {
  const [{basket},dispatch] = useStateValue();

const addToBasket = () => {
    dispatch({
        type: "ADD_TO_BASKET",
        item:{
            id:id,
            title:title,
            image:image,
            price:price,
            rating:rating
        },
    })
};

return (
    <div className="product">
    <div className="product__info" >
       <p>{title}</p>
      
       <p className="product__price">
       <small>$</small>
       <strong> {price} </strong>
        </p>
        <div className="product__rating"> 
        {Array(rating)
        .fill( )
        .map((_) => ( 
            <p>-</p>
        ))}
        </div>
        </div>
        <img src={image} alt=""/>
        <button  onClick={addToBasket} className="product__button"> Add to basket </button>
    </div>
);
}

export default product

import React from 'react';
import Product from "./Product";
import "./Home.css";

function Home() {
    return (
        <div className="home">
            <img class="home__image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.3U6xnN8wOOQ5atG6MO907wHaEK%26pid%3DApi&f=1"/>
      <div className="home__row">
                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://i.pinimg.com/originals/e6/13/0e/e6130ed7d4820b7eba0a1ba7a631abea.jpg"
              alt=""  />



                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://i.pinimg.com/736x/ef/c4/01/efc4017b4340dfc35a98ca2235189759.jpg"
                    alt="" />


                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.byrdie.com%2Fthmb%2F6a2mRHTbEwSWrTOTG1yT5gFDxFs%3D%2F700x700%2Ffilters%3Ano_upscale()%3Amax_bytes(150000)%3Astrip_icc()%2Fcdn.cliqueinc.com__cache__posts__269825__iherb-natural-beauty-products-269825-1539195561186-product.700x0c-6534d2dd4ba1409b84d89684001853df.jpg&f=1&nofb=1"
                    alt="" />


                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://s3.images-iherb.com/sre/sre01007/r/1.jpg"
                    alt="" />

                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fb7%2Fb4%2F72%2Fb7b47228df40d8a2759f30aa778ff31c.jpg&f=1&nofb=1"
                    alt="" />
                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://s3.images-iherb.com/now/now04920/r/9.jpg"
                    alt="" />
      </div>


       
       

        </div>
    )
}

export default Home;

从“React”导入React；
导入“/Product.css”
从“/StateProvider”导入{useStateValue}；
功能产品（{id，title，image，price，rating}）
{
const[{basket}，dispatch]=useStateValue（）；
常量addToBasket=（）=>{
派遣({
键入：“将_添加到_篮中”，
项目：{
id:id，
标题:标题,，
图像：图像，
价格：价格，
评级：评级
},
})
};
返回(
{title}

$
{price}

{数组（额定值）
.fill（）
.map（（)）=>（
-
))}
加入篮子
);
}
导出默认产品

import React from 'react';
import "./Product.css"
import { useStateValue } from "./StateProvider";




 function product({id,title,image,price,rating}) 
  {
  const [{basket},dispatch] = useStateValue();

const addToBasket = () => {
    dispatch({
        type: "ADD_TO_BASKET",
        item:{
            id:id,
            title:title,
            image:image,
            price:price,
            rating:rating
        },
    })
};

return (
    <div className="product">
    <div className="product__info" >
       <p>{title}</p>
      
       <p className="product__price">
       <small>$</small>
       <strong> {price} </strong>
        </p>
        <div className="product__rating"> 
        {Array(rating)
        .fill( )
        .map((_) => ( 
            <p>-</p>
        ))}
        </div>
        </div>
        <img src={image} alt=""/>
        <button  onClick={addToBasket} className="product__button"> Add to basket </button>
    </div>
);
}

export default product

import React from 'react';
import Product from "./Product";
import "./Home.css";

function Home() {
    return (
        <div className="home">
            <img class="home__image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.3U6xnN8wOOQ5atG6MO907wHaEK%26pid%3DApi&f=1"/>
      <div className="home__row">
                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://i.pinimg.com/originals/e6/13/0e/e6130ed7d4820b7eba0a1ba7a631abea.jpg"
              alt=""  />



                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://i.pinimg.com/736x/ef/c4/01/efc4017b4340dfc35a98ca2235189759.jpg"
                    alt="" />


                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.byrdie.com%2Fthmb%2F6a2mRHTbEwSWrTOTG1yT5gFDxFs%3D%2F700x700%2Ffilters%3Ano_upscale()%3Amax_bytes(150000)%3Astrip_icc()%2Fcdn.cliqueinc.com__cache__posts__269825__iherb-natural-beauty-products-269825-1539195561186-product.700x0c-6534d2dd4ba1409b84d89684001853df.jpg&f=1&nofb=1"
                    alt="" />


                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://s3.images-iherb.com/sre/sre01007/r/1.jpg"
                    alt="" />

                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fb7%2Fb4%2F72%2Fb7b47228df40d8a2759f30aa778ff31c.jpg&f=1&nofb=1"
                    alt="" />
                <Product
                    id="300"
                    title="Argan oil"
                    price={11.96}
                    rating={5}
                    image="https://s3.images-iherb.com/now/now04920/r/9.jpg"
                    alt="" />
      </div>


       
       

        </div>
    )
}

export default Home;

从“React”导入React；
从“/Product”导入产品；
导入“/Home.css”；
函数Home（）{
返回(
)
}
导出默认主页；

我更改了两件事并修复了错误首先在Product.js中，我将函数名改为Product（大写）

在reducer.js中的第二个我将…action.item更改为action.item

1.将component product.js中的函数product更改为product，这样就可以了。

尝试将

产品

组件定义资本化。亲爱的，我以前尝试过，现在不行