Question

因此，我试图在我的简单应用中生成一个随机数，但是会出现此错误，任何人都可以帮助我。

./ src / ComLifeCycle.js

语法错误：E：/REACT/props-states/src/ComLifeCycle.js：意外   令牌，预期的（31:37）


31 | this.setState（number：Math.random（））; //这行的问题。

import React, { Component } from 'react';
import logo from './logo.svg';
import './ComLifeCycle.css';

class ComLifeCycle extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Body />
      </div>
    );
  }
}

class Body extends Component {
  constructor(props){
    super(props);

    this.state = {
      number: 0
    };
    this.generateRandomNumber = this.generateRandomNumber.bind(this);
  }

  generateRandomNumber = () => {
    console.log("clicked");
    this.setState(number: Math.random()); // **problem in this line**
  }

  render(){
    return(
      <div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.generateRandomNumber}>Random number</button>
        <Number myNumber={this.state.number}/>
      </div>
    );
  }
}

class Number extends Component {
  render(){
    return(
      <div>
        <br />
        <p>{this.props.myNumber}</p>
      </div>
    );
  }
}

export default ComLifeCycle;

Answer 1

您对setState的语法不正确，它需要将更新后的值用作对象。简而言之，您在number: Math.random()

周围缺少花括号

this.setState({number: Math.random()});

Answer 2

您必须传递对象而不是道具，请尝试

this.setState({number: Math.random()});

Answer 3

this.setState的语法错误。这是正确的语法

this.setState({number: Math.random()});

Answer 4

您的setState语法是错误的，您在这里缺少{}大括号，因此可以这样操作：

 generateRandomNumber = () => {
    const randomNumber = Math.random()
    this.setState({number : randomNumber})); 
  }

在React JS中生成随机数

4 个答案: