隨機選擇要在React中顯示的影像

我正在嘗試隨機選擇要在 ReactJS 中顯示的影像（不是 React Native）。我試圖以另一個問題為基礎，但我很困惑，不確定如何解決這個錯誤。這是我在RandomWelcomePicture.js. 我對此有點陌生，如果這是一個簡單的解決方法，我很抱歉。

import React, { useState } from 'react';
import image2019_0201 from '../images/2019_0201.jpeg';
import image2019_0202 from '../images/2019_0202.jpeg';
import image2019_0203 from '../images/2019_0203.jpeg';

const images = [
    image2019_0201,
    image2019_0202,
    image2019_0203,
];

class RandomWelcomePicture extends React.Component {
    state = { currentImageIndex: Math.floor(Math.random() * images.length }
  
    componentDidMount() {
      this.changeImage();
    }
        
    changeImage = () => {
      const randomNumber = Math.floor(Math.random() * images.length);
      this.setState({
        currentImageIndex: randomNumber
      });
    } 
    render() {
      return (
        <image
          source={images[this.state.currentImageIndex]}
          //style={styles.imageStyle}
        />
      )
    }
  } 

這是我的錯誤：

ERROR in ./src/components/RandomWelcomePicture.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: RandomWelcomePicture.js: Unexpected token, expected "," (13:74)

  11 |
  12 | class RandomWelcomePicture extends React.Component {
> 13 |     state = { currentImageIndex: Math.floor(Math.random() * images.length }
     |                                                                           ^
  14 |   
  15 |     componentDidMount() {
  16 |       this.changeImage();

但我認為那里不應該有逗號。還有什么我想念的嗎？

uj5u.com熱心網友回復：

您的問題是將React.Component類和功能組件合二為一。讓我們逐行查看代碼以更清楚地看到這一點

export default function RandomWelcomePicture() {
// -------------^---------------- functional syntax (its a function)
    componentDidMount() {
// ---------^---------------- class syntax (defining a method)
        this.changeImage();
      }
      
  changeImage = () => {
// ---^---------------- class syntax (defining a method)
    const randomNumber = Math.floor(Math.random() * images.length);
    this.setState({
// ---^---------------- class syntax (setState)
      currentImageIndex: randomNumber
    });
  } 

  return (
// -^---------------- functional syntax (return jsx vs render method)
    <Image
        source={images[this.state.currentImageIndex]}
        style={styles.imageStyle}
    />
  )
  
} 

現在讓我們看看我們如何將其更改為以功能方式和類組件方式作業

功能組件

你不需要一個 componentDidMount 來做你想做的事情。只需將它作為初始值傳遞給你的狀態。

export default function RandomWelcomePicture() {
  const [currentImageIndex, setCurrentImageIndex] = useState(Math.floor(Math.random() * images.length))
  const changeImage = () => {
    const randomNumber = ;
    setCurrentImageIndex(randomNumber);
  }
  useEffect(() => changeImage(), [])

  return (
    <Image
        source={images[currentImageIndex]}
        style={styles.imageStyle}
    />
  )
}

如果你真的需要一個功能組件中的 componentDidMount 你應該這樣做

useEffect(() => changeImage(), []) // empty array means this effect only runs once which is the same thing as componentDidMount

類組件

class RandomWelcomePicture extends React.Component {
  state = { currentImageIndex: Math.floor(Math.random() * images.length }

  componentDidMount() {
    this.changeImage();
  }
      
  changeImage = () => {
    const randomNumber = Math.floor(Math.random() * images.length);
    this.setState({
      currentImageIndex: randomNumber
    });
  } 
  render() {
    return (
      <Image
        source={images[this.state.currentImageIndex]}
        style={styles.imageStyle}
      />
    )
  }
} 

標籤：

上一篇：Reacttable-如何合并特定列和單元格值的表格

下一篇：在什么情況下，我們想使用apply呢？