时间戳

首页 > 解决方案 > React Native - 从数组中设置状态

react-native - React Native - 从数组中设置状态

问题描述

我是create-react-native-app第一次尝试，我想在不同的时间间隔内更改文本。但是我的代码只给了我数组的最后一项。

import React from 'react';
import { Text } from 'react-native';

const blinkText = [
  {
    text: "A",
    time: 500,
  },
  {
    text: "B",
    time: 1000,
  },
  {
    text: "C",
    time: 1000,
  },
  ];


export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      blinkText.map(value => this.setState(value))
    }, this.state.time);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }


  render() {
   return(
    <Text>{this.state.text}</Text>
    );
  }

}

我知道我有我的问题，componentDidMount()但我想不出办法。请查看我的代码并进行修改。谢谢。

标签： react-nativecreate-react-native-app

解决方案

尝试这个

componentDidMount(){
    blinkText.map(e => {
        setTimeout(() => {
            this.setState(
                prevState => ({
                    text: [...prevState.text, e]
                });
            );
        }, e.time);
    });
}

请注意，this.stat.text是一个数组，因此您应该render()通过应用在您的方法中呈现它map()

例子：

{ this.state.text.map((e, i) => {
   return (
     <Text key={i}>{e}</Text>
   );
})}

推荐阅读