随机选择要在 React 中显示的图像

Question

我正在尝试随机 select 一张图片以在 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();

但我认为那里不应该有逗号。还有什么我想念的吗？

Answer 1

您的问题是将 React.Component class 和功能组件合二为一。让我们逐行查看代码以更清楚地看到这一点

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

现在让我们看看如何将其更改为以功能方式和 class 组件方式工作

功能组件

你不需要 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 组件

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

随机选择要在 React 中显示的图像

Randomly Selecting an Image to Display in React

javascript

reactjs

syntax-error

功能组件

Class 组件