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

【问题标题】：How to use state in this functional component?如何在这个功能组件中使用状态？
【发布时间】：2021-06-15 04:22:39
【问题描述】：

我想在这段代码中使用这个状态，但是我得到了这个错误：'state' is not defined 我该如何使用它？我知道我可以使用类组件，但是使用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;

【问题讨论】：

查看钩子文档。并且不要忘记添加 process.env.PUBLIC_URL （请参阅下面的答案）

标签： reactjs components state

【解决方案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”文件夹（项目的根目录），创建一个“images”文件夹（或其他）并将图像放入其中。

然后，换行：

<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}/>

【讨论】：