React native 状态更改不重新提交组件

我有一个包含一些文本组件的简单列表。列表中的一个组件是显示金额的文本字段，另一个显示“支付”。我使用react native fip组件根据状态值isFlipped翻转这些文本

我正在使用setInterval更改componentDidMount（）中的状态值。我可以看到isfliped在我的状态中的值一直在变化，但是呈现copmponets的方法没有被调用

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  FlatList,
  Text,
  View,
  Alert,
  Button
} from "react-native";
import FlipComponent from "react-native-flip-component";
import Screen from "../../components/screen";
import { Colors } from "../../util/constants";

export default class PaymentPlan extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFlipped: true,
      FlatListItems: [
        {
          key: "1",
          installment: "Installment 1",
          date: "10-Sept-2018",
          amount: 50000,
          status: "paid"
        },
        {
          key: "2",
          installment: "Installment 2",
          date: "10-Oct-2018",
          amount: 50000,
          status: "paid"
        },
        {
          key: "3",
          installment: "Installment 3",
          date: "10-Nov-2018",
          amount: 50000,
          status: "paid"
        },
        {
          key: "4",
          installment: "Installment 4",
          date: "10-Dec-2018",
          amount: 50000,
          status: "unpaid"
        },
        {
          key: "5",
          installment: "Installment 5",
          date: "10-Jan-2019",
          amount: 50000,
          status: "unpaid"
        }
      ]
    };
    this.renderFlipComponent = this.renderFlipComponent.bind(this);
  }

  componentDidMount() {
    this.setState({
      isFlipped: setInterval(function() {
        const rand = Math.floor(Math.random() * (10 - 1 + 1) + 1);
        console.log(rand % 2 == 0 ? true : false);
        return rand % 2 == 0 ? true : false;
      }, 3000)
    });
  }

  FlatListItemSeparator = () => {
    return (
      <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B" }} />
    );
  };

  GetItem(item) {
    Alert.alert(item);
  }

  renderFlipComponent = item => {
    console.log("renderFlipComponent");
    return (
      <FlipComponent
        isFlipped={this.state.isFlipped}
        frontView={
          <View>
            <Text
              style={[styles.item, { color: "white", backgroundColor: "red" }]}
              onPress={this.GetItem.bind(this, item.key)}
            >
              {" "}
              {`AED ${item.amount}`}{" "}
            </Text>
          </View>
        }
        backView={
          <View>
            <Text
              style={[styles.item, { color: "white", backgroundColor: "red" }]}
            >
              {" "}
              {"Pay"}{" "}
            </Text>
          </View>
        }
      />
    );
  };

  render() {
    return (
      <Screen title="Payments" showBack>
        <View
          style={{
            backgroundColor: "white",
            padding: 20,
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text style={{ fontSize: 24 }}>Payment Plan for #CW1</Text>
        </View>
        <View style={styles.container}>
          <FlatList
            extraData={this.state}
            data={this.state.FlatListItems}
            ItemSeparatorComponent={this.FlatListItemSeparator}
            renderItem={({ item }) => (
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View style={{ flex: 1, flexDirection: "column" }}>
                  <Text
                    style={styles.item}
                    onPress={this.GetItem.bind(this, item.key)}
                  >
                    {" "}
                    {item.installment}{" "}
                  </Text>
                  <Text
                    style={styles.item}
                    onPress={this.GetItem.bind(this, item.key)}
                  >
                    {" "}
                    {item.status == "paid"
                      ? `Paid on ${item.date}`
                      : `Due on ${item.date}`}
                  </Text>
                </View>
                <View style={{ justifyContent: "center", marginRight: 10 }}>
                  {item.status == "paid" ? (
                    <Text
                      style={[
                        styles.item,
                        { color: "white", backgroundColor: Colors.genoa }
                      ]}
                      onPress={this.GetItem.bind(this, item.key)}
                    >
                      {" "}
                      {`AED ${item.amount}`}{" "}
                    </Text>
                  ) : (
                    this.renderFlipComponent(item)
                  )}
                </View>
              </View>
            )}
          />
        </View>
      </Screen>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "white"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  item: {
    padding: 10,
    fontSize: 20,
    height: 45
  }
});

import React，{Component}来自“React”；
进口{
平台，
样式表，
平面列表，
文本，
看法
警觉的，
按钮
}从“反应本族语”；
从“react native flip component”导入FlipComponent；
从“../../components/Screen”导入屏幕；
从“./../util/constants”导入{Colors}”；
导出默认类PaymentPlan扩展组件{
建造师（道具）{
超级（道具）；
此.state={
是的，
平面列表项目：[
{
关键：“1”，
第1期：“第1期”，
日期：“2018年9月10日”，
金额：50000，
状态：“已支付”
},
{
键：“2”，
第二期：“第二期”，
日期：“2018年10月10日”，
金额：50000，
状态：“已支付”
},
{
关键：“3”，
第三期：“第三期”，
日期：“2018年11月10日”，
金额：50000，
状态：“已支付”
},
{
关键：“4”，
第四期：“第四期”，
日期：“2018年12月10日”，
金额：50000，
状态：“未付”
},
{
钥匙：“5”，
第五期：“第五期”，
日期：“2019年1月10日”，
金额：50000，
状态：“未付”
}
]
};
this.renderFlipComponent=this.renderFlipComponent.bind（this）；
}
componentDidMount（）{
这是我的国家({
isFlipped:setInterval（函数（）{
const rand=Math.floor（Math.random（）*（10-1+1）+1）；
console.log（rand%2==0？true:false）；
返回rand%2==0？真：假；
}, 3000)
});
}
FlatListItemSeparator=（）=>{
返回(
);
};
GetItem（项目）{
警报。警报（项目）；
}
RenderLipComponent=项目=>{
console.log（“renderFlipComponent”）；
返回(
);
};
render（）{
返回(
#CW1的付款计划
(
{" "}
{项目.分期付款}{“”}
{" "}
{item.status==“已支付”
？`于${item.date}支付`
：`到期日${item.date}`}
{item.status==“已付款”(
{" "}
{`AED${item.amount}}{}
) : (
此.renderflip组件（项）
)}
)}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
背景颜色：“白色”
},
标题文字：{
尺寸：20，
textAlign：“居中”，
差额：10，
fontWeight：“粗体”
},
项目：{
填充：10，
尺寸：20，
身高：45
}
});

这是状态的变化方式。基本上，我应该在setInterval中调用setState（），而不是反过来调用

componentDidMount() {
var self = this;
setInterval(function() {
  const rand = Math.floor(Math.random() * (10 - 1 + 1) + 1);
  console.log(rand % 2 == 0 ? true : false);
  self.setState({ isFlipped: rand % 2 == 0 ? true : false });
}, 3000);

---

}这是状态将如何改变的关键。基本上，我应该在setInterval中调用setState（），而不是反过来调用

componentDidMount() {
var self = this;
setInterval(function() {
  const rand = Math.floor(Math.random() * (10 - 1 + 1) + 1);
  console.log(rand % 2 == 0 ? true : false);
  self.setState({ isFlipped: rand % 2 == 0 ? true : false });
}, 3000);

}