我有3个竞选候选人,我想通过向服务器后端发出axios呼叫来更新他们的投票计数。
一切正常。
这是来自axios调用的json响应示例。
[{ "id": "1", "name": "contestant 1", "vote": "300" }]
我的问题:
我唯一的问题是加载事件。当我单击第一个参赛者以通过axios调用更新其投票结果时。代替 的应用程序仅显示单击参赛者按钮的内容加载... ,它将显示内容加载... 所有三个参赛者按钮。
我想要的:
请仅显示点击的参赛者按钮如何显示内容加载中...
我想这与点击的参赛者的ID有关。我也尝试过,但是没办法
if (person.id === person_id){
this.setState({ loading: true });
}
这是代码
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
loading: false,
isLoading: true
};
}
componentDidMount() {
this.setState({
data: [
{ id: "1", name: "contestant 1", vote: "3" },
{ id: "2", name: "contestant 2", vote: "6" },
{ id: "3", name: "contestant 3", vote: "2" }
]
});
}
handleVote(person_id, person_vote) {
const data_vote = {
person_id: person_id,
person_vote: person_vote
};
this.setState({ loading: true }, () => {
axios.get("http://localhost/apidb_react/result.json", { data_vote })
.then(response => {
const newData = this.state.data.map(person => {
if (person.id !== person_id) return person;
return { ...person,vote: response.data[0].vote };
});
this.setState(state => ({
data: newData,
loading: false,
}));
})
.catch(error => {
console.log(error);
});
});// close loading
}
render() {
let data_loading;
if (this.state.loading) {
data_loading = "Content Loading......"
}
return (
<span>
<label>
<ul>
{this.state.data.map(person => (
<li key={person.id}>
{person.name} --(vote count: {person.vote})
<br />
{data_loading}
<button
type="button"
onClick={() => this.handleVote(person.id, person.vote)}
> Get Vote</button>
</li>
))}
</ul>
</label>
</span>
);
}
}
答案 0 :(得分:1)
每个参赛者都需要一个单独的loading
状态。因此,合理的下一步是创建具有自己状态和自己的UI的Contestant组件,以将该状态反映给用户。
类似这样的东西:
class Contestant extends React.Component {
static defaultProps = {
onVote: () => {},
onError: () => {}
};
constructor() {
super();
this.state = {
isLoading: false
};
}
handleVote(person_id, person_vote) {
const data_vote = {
person_id: person_id,
person_vote: person_vote
};
this.setState({ isLoading: true });
axios
.get("http://localhost/apidb_react/result.json", { data_vote })
.then(response => {
this.props.onVote(person_id, response.data[0].vote);
this.setState({ isLoading: false });
})
.catch(error => {
this.props.onError(error);
});
}
render() {
const { person } = this.props;
const { isLoading } = this.state;
return (
<li key={person.id}>
{isLoading
? "Content Loading......"
: `${person.name} --(vote count: ${person.vote})`}
<br />
<button
type="button"
onClick={() => this.handleVote(person.id, person.vote)}
>
Get Vote
</button>
</li>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ id: "1", name: "contestant 1", vote: "3" },
{ id: "2", name: "contestant 2", vote: "6" },
{ id: "3", name: "contestant 3", vote: "2" }
]
});
}
onVote = (person_id, vote) => {
const { data } = this.state;
this.setState({
data: data.map(person => {
if (person.id !== person_id) return person;
return { ...person, vote };
})
});
};
render() {
return (
<span>
<label>
<ul>
{this.state.data.map(person => (
<Contestant
key={person.id}
person={person}
onVote={this.onVote}
/>
))}
</ul>
</label>
</span>
);
}
}
功能性沙箱:https://codesandbox.io/s/p7q3qylwj0。显然,您需要在此处找到一个真实的端点,而不是:http://localhost/apidb_react/result.json