Question

我试图创建一个函数，当单击“下一步”按钮时，该函数会传递到我的api的另一个随机对象。但是我无法执行该功能来检索其他值并更新浏览器中的信息。

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    data: [],
    chosenPlanet: 0,
  }
  componentDidMount() {
    const url = 'http://localhost:4000/results'

    fetch(url)
      .then(response => response.json())
      .then(response => {
        this.setState({
          data: response.results,
        })
      })
  }
renderPlanet = (event) => {
const planetRandom = Math.floor(Math.random() * this.state.data)
return planetRandom
}

  render() { 
    const index = Math.floor(Math.random() * this.state.data.length)
    const planet = this.state.data[index]
    console.log(planet)

    return (
      <div className="App">
         <div>{this.planet.name}</div>
        <button onClick={this.renderPlanet}>Next</button>
      </div>
    )
  }
}

export default App;

Answer 1

在事件处理程序中，状态必须更新。状态更新会导致组件自行更新或重新渲染。在这种情况下，由于状态没有改变，只需要触发更新，因此可以使用forceUpdate。

handleNext = (event) => {
  this.forceUpdate();
}

如何创建选择另一个对象并在浏览器中刷新的函数

1 个答案: