Question

我是编码新手，对本机和移动应用程序开发有所反应。我正在尝试构建水提醒应用程序。

我有FAB组按钮，显示不同类型的饮料。当用户使用（汉堡菜单图标）单击第二个FAB按钮时，它将打开，我想按所选水量设置状态。然后将此状态传递到进度圈以计算进度。

但是显然我无法正确更新状态，因为我收到了一个progress.circle收到的NaN值错误

const goal = 2000;

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null
  };

  state = {
    progress: 0,
    drunk: 0,
    open: false
  };

  drinkOther = drink => {
    let bottle = 500;
    let bigBottle = 1000;
    let coffee = 200;
    let tea = 200;
    let progress = this.state.progress;
    this.setState(prevState => ({
      drunk: prevState.drunk + drink,
      progress: (prevState.drunk + drink) / goal
    }));
  };

  render() {
    return (
      <Provider>
        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Portal>
              <FAB.Group
                open={this.state.open}
                icon={"menu"}
                actions={[
                  {
                    icon: require("../assets/images/juice.png"),
                    label: "Juice",
                    onPress: this.drinkOther("juice")
                  },
                  {
                    icon: require("../assets/images/coffee.png"),
                    label: "Coffee",
                    onPress: this.drinkOther("coffee")
                  },
                  {
                    icon: require("../assets/images/tea.png"),
                    label: "Tea",
                    onPress: this.drinkOther("tea")
                  },
                  {
                    icon: require("../assets/images/big_bottle.png"),
                    label: "Big Bottle",
                    onPress: this.drinkOther("bigBottle")
                  },
                  {
                    icon: require("../assets/images/bottle.png"),
                    label: "Small Bottle",
                    onPress: this.drinkOther("bottle")
                  }
                ]}
                onStateChange={({ open }) => this.setState({ open })}
                onPress={() => {
                  this.setState({ open: !this.state.open });
                }}
                style={styles.fab}
                color={"white"}
                theme={{ colors: { accent: Colors.tintColor } }}
              />
            </Portal>
          </View>
        </View>
      </Provider>
    );
  }

Answer 1

在setup中查看此setState通话：

drinkOther

如果您查看this.setState(prevState => ({ drunk: prevState.drunk + drink, progress: (prevState.drunk + drink) / goal }));的来源，则是传递给drink的参数：

drinkOther

您正在尝试将字符串“ juice”，“ coffee”或其他内容添加到onPress: this.drinkOther("juice")总数中，然后将其除以数字，这当然会返回NaN。

FAB组按钮未设置状态-React Native

1 个答案: