我有一个状态为 users
的对象,我想迭代它并每隔 x
秒显示一个不同的用户。
这是我到目前为止:
class DisplayUser extends Component { constructor(props) {
super(props);
this.state = {
users: [
{ name: 'batman', age: 25 },
{ name: 'spiderman', age: 27 },
{ name: 'superman', age: 26 }
]
};
}
tick() {
this.setState((prevState) => ({
users: prevState.users
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <div>User: {this.state.users[0].name}</div>;
}
}
本质上是一个
for
循环,但我发现在 React 中很难做到,我应该怎么做? 最佳答案
您当前版本的两个问题:
setState
调用不会做任何事情,因为你实际上并没有改变状态 users
中显示第一个条目,而不是改变它 我会在 state 中存储一个索引,然后在
render
中使用它,使用 ***
注释标记的更改:class DisplayUser extends Component {
constructor(props) {
super(props);
this.state = {
users: [
{ name: 'batman', age: 25 },
{ name: 'spiderman', age: 27 },
{ name: 'superman', age: 26 }
],
currentUserIndex: 0 // ***
};
}
tick() {
this.setState(({users, currentUserIndex}) => ({ // ***
currentUserIndex: (currentUserIndex + 1) % users.length // ***
})); // ***
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
const user = this.state.users[this.state.currentUserIndex];
return <div>User: {user.name}</div>; // ***
}
}
现场示例:
const {Component} = React;
class DisplayUser extends Component {
constructor(props) {
super(props);
this.state = {
users: [
{ name: 'batman', age: 25 },
{ name: 'spiderman', age: 27 },
{ name: 'superman', age: 26 }
],
currentUserIndex: 0 // ***
};
}
tick() {
this.setState(({users, currentUserIndex}) => ({ // ***
currentUserIndex: (currentUserIndex + 1) % users.length // ***
})); // ***
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
const user = this.state.users[this.state.currentUserIndex];
return <div>User: {user.name}</div>; // ***
}
}
ReactDOM.render(<DisplayUser />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
关于javascript - 每 x 秒迭代一次处于状态的对象,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56235236/