在响应本机中按时间限制迭代JSON数据

Question

Currently i have a <Text> values inside a <View> in react-native . and i have to pass one JSON to iterate over that text field . so how i want them to be is , Assume the JSON contains 4 objects , So initially The text field will show the first object's value inside the <View> . After 5 seconds instead of first object i have to show the Second object . like wise it has to goes on until the last object come's . For example ,

  const mydata = [ { name:"Aaa" //object 1 }, { name:"Bbb" //object 2 }, { name:"Ccc" //object 3 }, { name:"Ddd" //object 5 }, ] //initial view <View> <Text>{object1.name} </Text> /// ---> Aaa </View> //After 5 seconds <View> <Text>{object2.name} </Text> /// ---> Bbb </View> //Like this it has to go on . 

and it need's to be change automatically for every 5 seconds .Here i attached my code ,

 <View> {allData.map((data,i) => ( <DataInDetail // this is the component i imported name={data.name} /> ))} </View> //DataInDetail component import React, { Component } from "react"; import { View, Text, Image, StyleSheet, Dimensions, Platform } from "react-native"; const win = Dimensions.get("window"); const width = win.width; export default class DataInDetail extends Component { render() { return ( <View> <Text>{this.props.name}</Text> </View> ); } } 

Now it is showing the last JSON only . pls someone clarify me from this . Thanks in advance .

Answer 1

You can use setTimeout to achive this. Check TimerMixin to use this.setTimeout . TimerMixin helps you with the state setting error after the components unmount.

Example

const data = [ { name:"Aaa" }, { name:"Bbb" }, { name:"Ccc" }, { name:"Ddd" } ];
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  componentDidMount() {
    data.forEach((d, index) => {
      this.setTimeout(() => {
        this.setSTate({ name: d.name });
      }, (5000 * index))
    })
  }

  render() {
    return(
      <View>
        <DataInDetail name={this.state.name} />
      </View>
    )
  }
}

UPDATE (To make it loop indefinitely) You can turn the setTimeout loop into a function and can call it at the last index of the loop. We increment index by one because we want change happen after 5 seconds after the initial start.

const data = [ { name:"Aaa" }, { name:"Bbb" }, { name:"Ccc" }, { name:"Ddd" } ];
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  setLoop(isIntial) {
    data.forEach((d, index) => {
      setTimeout(() => {
        this.setSTate({ name: d.name }, () => {
          if (index == (data.length - 1)) this.setLoop.bind(this, false);
        });
      }, (isInitial === true ? (5000 * index) : (5000 * (index + 1) )));
    });
  }

  componentDidMount() {
    this.setLoop(true);
  }

  render() {
    return(
      <View>
        <DataInDetail name={this.state.name} />
      </View>
    )
  }
}