FlatList 中的 React Native 更新状态

Question

我正在使用 React Native 构建电子商务应用程序。我遇到了一个问题。在 "Basket" 页面中，我想显示商品的总价。

我的状态 totalPrice 在开始时设置为 0，当我在平面列表中显示每个项目时，我想更新 totalPrice（totalPrice = totalPrice + 项目价格 * 数量）

我的代码：

class Basket extends Component {

  constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
        totalPrice: 0,
      }
    }

  componentDidMount(){

    return fetch(...)
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.records,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {

    if(this.state.isLoading){
      return(
        <View>
          <ActivityIndicator/>
        </View>
      )
    }



    return (
      <View style={{ flex: 1}}>

        <ScrollView>

            <FlatList
              data={this.state.dataSource}
              numColumns={1}
              renderItem={({item}) => //displaying the items

              //below i want to update totalPrice but it didn't work
              
              this.setState({
                 totalPrice : this.state.totalPrice + item.quantity * 
                 item.price,
           });  
            }
            />

          </ScrollView>
            
            <View>
            <Text> {this.state.totalPrice} </Text>
            </View>


      </View>

    );

  }
}

Answer 1

在 renderItem 中，您需要 return 组件而不是函数。

你的renderItem应该是这样的

renderItem = ({ item }) => {
 return(
    <TouchableOpacity onPress={() => this.setState({
             totalPrice : this.state.totalPrice + item.quantity * 
             item.price,
       })}>
       <Text>Your View stays here </Text>
    </TouchableOpacity>
  );
}

<FlatList
  data={this.state.data}
  renderItem={this.renderItem}
 />

在这里我向你保证你有一个像这样的数据数组

[{ quantity: 2, price: 22 }, { quantity: 1, price: 12 }] 我看到你无缘无故地将 FlatList 包裹在 ScrollView 中。最好先初始化您的状态。您最初可以将数据或数据源变量设置为状态中的空数组

state = { data: [], ... }

Answer 2

不要在你的 component.if 中使用 setState 你想获得总价你可以这样做：

    render() {   
    const totalPrice =
    this.state.dataSource &&
     this.state.dataSource.map((item)=> item.quantity).reduce((prev, next) => prev + next)

    return(
    ...
     <Text> {totalPrice} </Text>
    )
}

这里我们使用"reduce" ES6语法。希望对您有所帮助

FlatList 中的 React Native 更新状态

React Native update state in FlatList

reactjs

react-native

reactive-programming

expo

mobile-development