Javascript 将插入到定额表中的卡路里总值相加

饮食（屏幕）

导出类饮食扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食物清单：[]，
热量：0，
};
}
静态getDerivedStateFromProps（props，状态）{
if（道具、路线、参数、食物）{
返回{foodList:[…state.foodList，props.route.params.food]}；
getSum=（）=>{
{（填充）=>{this.state.carricotsum}
item.key.toString（）}
renderItem={（数据）=>(
{data.item.foodName}
{data.item.carries}
)}
/>

食品创建（屏幕）

导出类FoodCreate扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食物：空，
卡路里：零，
食物清单：[]，
};
}
提交食物=（食物、卡路里）=>{
这是我的国家(
{
食物清单：[
…这个.state.foodList，
{
关键字：Math.random（），
食物名称：食物，
卡路里：卡路里，
},
],
},
() => {
this.props.navigation.navigate（“节食”{
foodList:this.state.foodList，
});
}
);
};
render（）{
返回(
this.setState（{food}）
/>
this.setState（{carries}）
/>
{
this.submitFood（this.state.food，this.state.carries）；
}}
/>

大家好，我正在尝试制作一个应用程序，用户必须在

FoodCreate

屏幕中插入

foodName

和

carries

，一旦他点击

复选标记

，它会将

foodName

和

carries

添加到

Diet

屏幕中的

Flatlist艺术将食物添加到
平面列表中
应该插入食物的卡路里总量，并在
动画循环表中表示出来。我使用的函数在
静态getDerivedStateFromProps中表示，我不知道我做错了什么

export class Diet extends Component {
  constructor(props) {
    super(props);
this.state = {
foodList: [],
caloricTotSum: 0,
    };
  }

static getDerivedStateFromProps(props, state) {
    if (props.route.params?.food) {
      return { foodList: [...state.foodList, props.route.params.food] };
      getSum = () => {                                                  <-----------function
        const { calories } = this.state.foodList;
        const caloricSum = calories.reduce(function (a, b) {
          return a + b;
        }, 0);
        this.setState({
          caloricTotSum: caloricSum,
        });
      };
    }
    return null;
  }

    render() {
      return (
           <View>

              <AnimatedCircularProgress
                size={80}
                width={7}
                fill={this.state.caloricTotSum}
                tintColor="#F54141"
                onAnimationComplete={() =>
                  console.log("onAnimationComplete")
                }
                backgroundColor="#3d5875"
                backgroundWidth={2}
                style={{ right: wp("8%") }}
              >
                {(fill) => <Text>{this.state.caloricTotSum}</Text>}
              </AnimatedCircularProgress>
                  <List>
                    <FlatList
                      data={this.state.foodList}
                      keyExtractor={(item, index) => item.key.toString()}
                      renderItem={(data) => (
                        <ListItem>
                          <Button>
                            <Left>
                              <Text>{data.item.foodName}</Text>
                            </Left>
                            <Right>
                              <Text>{data.item.calories}</Text>
                              <Icon name="arrow-forward" />
                            </Right>
                          </Button>
                        </ListItem>
                      )}
                    />
                  </List>
                </View>

export class FoodCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      food: null,
      calories: null,
      foodList: [],
    };
  }

  submitFood = (food, calories) => {
    this.setState(
      {
        foodList: [
          ...this.state.foodList,
          {
            key: Math.random(),
            foodName: food,
            calories: calories,
          },
        ],
      },
      () => {
        this.props.navigation.navigate("Diet", {
          foodList: this.state.foodList,
        });
      }
    );
  };
render() {
    return (
      <Container>
         <TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={this.state.food}
            onChangeText={(food) => this.setState({ food })}
          />
         <TextInput
            placeholder="Calories"
            placeholderTextColor="white"
            style={styles.inptMacros}
            keyboardType="numeric"
            value={this.state.calories}
            maxLength={5}
            onChangeText={(calories) => this.setState({ calories })}
          />
          <Button transparent>
          <Icon
            name="checkmark"
            style={{ fontSize: 25, color: "red" }}
            onPress={() => {
              this.submitFood(this.state.food, this.state.calories);
            }}
          />
        </Button>