Question

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

我正在使用setInterval更改componentDidMount（）中的状态值。我可以看到，在我的状态下，isFlipped的值一直在变化，但是渲染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
  }
});

Answer 1

这是状态将如何变化的方式。基本上，我应该在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);

}

状态更改而不是呈现组件

1 个答案: