如何在这个功能组件中使用状态？

Question

我想在此代码中使用此状态，但出现此错误：'state' 未定义 我该如何使用它？我知道我可以使用 class 组件，但它也给我一个使用 let settings 的错误。我知道我可以使用 useState 但我不知道该怎么做？

function ProductSlider () {

  state= {
    items: [
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'}
    ]
  }

  let settings={
    infinite: false,
    speed: 1000,
    arrows: true,
    slidesToShow: 5,
    slidesToScroll:4,
    responsive: [
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 2,
        },
      },
    ],

  }

  

  return (
    
    <div>
    <h6 className="text-muted">freinds suggestions</h6>
      {this.state.items.length===0 ? (
        <div className="spinner-border" role="status">
          <span className="sr-only">Loading...</span>
        </div>
      ):(
        <Slider {...settings}>
        {this.state.items.map(item =>(
          <div className="out" key={item.id}>
            <div className="card">
              <img alt={'users here'} src={item.image} height={65} width={65}/>
              <div className="card-body">
                <h5 className="card-title">{item.productName}</h5>
                <small className="card-text text-sm-center text-muted">{item.oldPrice}</small>
                <small className="card-text text-sm-center">{item.price}</small>
              </div>
            </div>
          </div>
        ))}
      </Slider>
      )}
    </div>
    
  )
}


export default ProductSlider;

Answer 1

import React, {useState} from "react";
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import "./style.css";

export default function ProductSlider {
  const [items, setItems] = useState([
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'},
      {id:1 , image: 'behesht_rich_dadpoordad637253469910551640thum.jpg' , productName: 'پدرپولدار پدر بی پول' , oldPrice: '50000' , price: '40000'}
    ])


  let settings={
    infinite: false,
    speed: 1000,
    arrows: true,
    slidesToShow: 5,
    slidesToScroll:4,
    responsive: [
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 2,
        },
      },
    ],

  }

  

  return (
    
    <div>
    <h6 className="text-muted">freinds suggestions</h6>
      {items.length===0 ? (
        <div className="spinner-border" role="status">
          <span className="sr-only">Loading...</span>
        </div>
      ):(
        <Slider {...settings}>
        {items.map(item =>(
          <div className="out" key={item.id}>
            <div className="card">
              <img alt={'users here'} src={item.image} height={65} width={65}/>
              <div className="card-body">
                <h5 className="card-title">{item.productName}</h5>
                <small className="card-text text-sm-center text-muted">{item.oldPrice}</small>
                <small className="card-text text-sm-center">{item.price}</small>
              </div>
            </div>
          </div>
        ))}
      </Slider>
      )}
    </div>
    
  )
}

要显示图像：

导航到“public”文件夹（项目的根目录），创建一个“图像”文件夹（或其他文件夹）并将图像放入其中。

然后，更改行：

<img alt={'users here'} src={item.image} height={65} width={65}/>

作者：

<img alt={'users here'} src={process.env.PUBLIC_URL/images(or whatever)/ + item.image} height={65} width={65}/>

如何在这个功能组件中使用状态？

How to use state in this functional component?

components

state

reactjs