當有人提交一筆財富時，我正試圖將一筆新財富納入我的陣列，但無論我嘗試什么，我現在都無法讓它發揮作用。我喜歡其他人提交財富的檔案，還是我在其他地方搞砸了？
import React from "react";
import {Link} from "react-router-dom"
import AddFortune from "./add-fortune";
class Fortune extends React.Component {
constructor(props) {
super(props);
this.state = {
fortunes: [
"An exciting opporunity lies ahead",
"A long time friend will brirng wise advice in the coming week",
"You will find great fortunes in unexpected places",
"Never give up... Unless you want to thats cool too",
"111",
"222",
"333",
"444",
"Maybe a nap is what you need",
"Don't Text Your EX!"
],
array.push('
fortune: "" ');
array.splice(array.length, 0, '{fortune:""}');
array[array.length] = fortune: "";
}
}
componentDidMount() {
this.getFortune();
}
getFortune = () => {
let rand = Math.floor(Math.random() * (this.state.fortunes.length) 0)
console.log(rand);
this.setState({
fortune: this.state.fortunes[rand]
})
}
render() {
return (
<body>
<div className="home-buttons-wrapper">
<button onClick={this.getFortune}>Your Fortune</button>
</div>
<h5>{this.state.fortune}</h5>
</body>
)
}
}
console.log('getFortune');
export default Fortune;
我想要添加到命運檔案中的內容
import React, { Component } from 'react'
export default class AddFortune extends Component {
constructor(props) {
super(props)
this.state = {
nameInput: "",
loading: false,
error: false
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value })
}
handleSubmit(event) {
event.preventDefault()
this.setState({
loading: true,
error: false
})
fetch("https://backend-edwin.herokuapp.com/item/add", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
name: this.state.nameInput
})
})
.then(response => response.json())
.then(data => {
if (data.id) {
this.props.history.push("/fortune")
}
})
.catch(error => {
console.log("Error adding fortune ", error)
this.setState({
loading: false,
error: true
})
})
}
render() {
return (
<div className='add-item-wrapper'>
<h2>Add Fortune</h2>
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="fortune"
name="nameInput"
value={this.state.nameInput}
onChange={this.handleChange}
/>
<button type="submit" disabled={this.state.loading}>Add Fortune</button>
</form>
{this.state.loading ? <div className="loading">Submitting...</div> : null}
{this.state.error ? <div className="error">An error occured... Please try again later.</div> : null}
</div>
)
}
}
uj5u.com熱心網友回復：
這是一種從財富串列中獲取隨機財富的方法。
import React from "react";
class Fortune extends React.Component {
constructor(props) {
super(props);
this.state = {
fortunes: [],
fortune: '',
loading: true,
error: false
}
}
componentDidMount() {
fetch("https://backend-edwin.herokuapp.com/item/", {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => response.json())
.then(data => {
this.setState({
loading: false,
fortunes: data, //check how the data is coming from api and add the variable here if fortunes list `if data.fortunes` then add data.fortunes here
error: false
}, this.getFortune)
})
.catch(error => {
console.log("Error fetching fortune ", error)
this.setState({
loading: false,
error: true
})
})
}
getFortune = () => {
let rand = Math.floor(Math.random() * (this.state.fortunes.length - 1) 0)
console.log(rand);
this.setState({
fortune: this.state.fortunes[rand]
})
}
render() {
if(this.state.loading) {
return (<div>Loading .....</div>)
}
if(this.state.error) {
return (<div>Error occurred in API</div>)
}
return (
<div>
<div className="home-buttons-wrapper">
<button onClick={this.getFortune}>Your Fortune</button>
</div>
<h5>{this.state.fortune}</h5>
</div>
)
}
}
export default Fortune
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/341261.html
上一篇：將字串值轉換為整數陣列