javascript - 单击按钮时提供新项目
问题描述
我正在尝试使此页面上的按钮打印另一个随机项目。我创建了函数,当我单击按钮时,控制台中会出现一个新对象;但是它不会在页面上打印。
import React from "react";
import './Random.css'
class Random extends React.Component {
constructor(props) {
super(props);
this.state = {
breweries: []
};
}
componentDidMount() {
fetch("https://api.openbrewerydb.org/breweries")
.then(response => response.json())
.then((data) => {
this.setState({
breweries: data,
})
})
}
reloadPage() {
const brewery = this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)];
console.log(brewery)
}
render() {
const brewery = this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)];
console.log(brewery)
return(
<div className="main">
<div className="details">
<p><b>Name:</b> {brewery && brewery.name}</p>
<p className="category"><b>Category:</b> {brewery && brewery.brewery_type}</p>
<p><b>Address:</b> {brewery && brewery && brewery.street}, {brewery && brewery.city},
{brewery && brewery.state}, {brewery && brewery.postal_code}, {brewery && brewery.country}</p>
<p><b>Phone Number:</b> {brewery && brewery.phone}</p>
<p><b>Website:</b> <a href={brewery && brewery.website_url} target="_blank">{brewery && brewery.website_url}</a></p>
</div>
<div className="button">
<button onClick={() => this.reloadPage()}>Get another random item</button>
</div>
</div>
)
}
}
export default Random;
解决方案
你需要this.setState()
reloadPage() {
const brewery = this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)];
console.log(brewery)
this.setState({breweries:brewery})
}
但在渲染中你会再次随机化
所以更好
componentDidMount() {
fetch("https://api.openbrewerydb.org/breweries")
.then(response => response.json())
.then((data) => {
this.reloadPage()
})
}
reloadPage() {
const brewery = this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)];
this.setState({breweries:brewery})
}
render() {
const brewery = this.state.breweries.length > 1 && this.state.breweries[0];
推荐阅读
- android - 在 Wear OS android 中每秒执行线程并使屏幕无效
- r - 将函数的答案存储到 R 中的向量中
- ios - Alamofire 发布图像上传请求,在 swift 中给出状态代码 - 400
- android - 你如何告诉android中的ktlint排除项目中的特定路径?
- java - 我想添加另一行,但它具有相同的变量但不同的参数
- powerbi - 基于平均值的动态分类
- outlook - 如何在 Outlook 电子邮件中使用自定义字体
- node.js - 检测代码是否使用 NodeJS 特定的全局对象,浏览器中可能不存在什么
- botframework - 如何在 PVA 中访问 Bot Framework Composer 对话框变量
- python-3.x - 如何迭代列表列表并仅使用列表理解更新列表中的元素