Question

目前，我在 react-native 的<Text>内有<View>个值。我必须传递一个JSON来迭代该文本字段。所以我希望它们是，假设JSON包含4个对象，所以最初文本字段将显示<View>内的第一个对象的值。在5秒后代替第一个对象，我必须显示第二个对象。像智者一样，它必须持续到最后一个物体出现。例如，

＆＃13;

 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 .

＆＃13;

并且需要每5秒自动更改一次。这是我附上我的代码，

＆＃13;

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

＆＃13;

现在它只显示最后一个JSON。请有人从此澄清我。提前致谢。

Answer 1

您可以使用setTimeout来实现此目的。检查TimerMixin以使用this.setTimeout。 TimerMixin可在组件卸载后帮助您解决状态设置错误。

示例

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

更新（使其无限循环）您可以将setTimeout循环转换为函数，并可以在循环的最后一个索引处调用它。我们将index递增1，因为我们希望在初始启动后的5秒后发生更改。

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

在反应原生中按时间限制迭代JSON数据

1 个答案: