我有一个状态为 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/

    10-11 22:12
    查看更多