Question

我第一次尝试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()遇到问题，但我想不出办法。请看一下我的代码并进行修改。谢谢。

Answer 1

尝试一下

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>
   );
})}

React Native-数组中的setState

1 个答案: