Question

我正在使用react native开发一个Android应用，其中包括购物车页面。我已经使用[ExpandableListView]：https://aboutreact.com/expandable-list-view/）来显示归类于类别的项目。每个项目都有一个“ +”和“-”按钮来更改计数。这是我的代码：

DetailScreen.js：

    import React, { Component } from 'react';
    import { LayoutAnimation, StyleSheet, TouchableOpacity, View, Text, ScrollView, UIManager, Platform, TextInput, KeyboardAvoidingView, ImageBackground, Picker, Image, Linking, Alert, } from 'react-native';

 export default class DetailsScreen extends Component 
 {

    static navigationOptions = {
      title: 'Details',
      header: null,
    }

    constructor(props) 
    {
      super(props);
      if (Platform.OS === 'android') {
         UIManager.setLayoutAnimationEnabledExperimental(true);
      }
     this.state = 
      {
         listDataSource: [
         {
          isExpanded: false,
          category_name: 'Item 1',
          subcategory: [{ id: 1, val: 'Sub Cat 1', count:'0' }, { id: 3, val: 'Sub Cat 3', count:'0' }],
         },
         {
          isExpanded: false,
          category_name: 'Item 2',
          subcategory: [{ id: 4, val: 'Sub Cat 4', count:'0' }, { id: 5, val: 'Sub Cat 5', count:'0' }],
         }],       
     };
   }

  updateLayout = index => {

  LayoutAnimation.configureNext
  (LayoutAnimation.Presets.easeInEaseOut);
      const array = [...this.state.listDataSource];
      array[index]['isExpanded'] = !array[index]['isExpanded'];
      this.setState(() => {
          return {
              listDataSource: array,
          };
      });
  };

  updateSalonData = newData =>
  {
      console.log('new Data: '  + JSON.stringify(newData));             
       var tempData = [...this.state.listDataSource];
      let index = tempData.findIndex(x => x.category_name === newData.category_name);
      tempData[index] = newData;          
      this.setState(() => {
          return {
              listDataSource: tempData,
          };
      });              
  };

  render() {
       return (
      <View style={{ marginStart: 10, marginEnd: 10, marginTop: 5, borderBottomWidth: 0.5 }}></View>
          <Text style={styles.topHeading}>Services</Text>

          <ScrollView enabled keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false} contentContainerStyle={{ flexGrow: 1, }}>
              {this.state.listDataSource.map((item, key) => (
                    <ExpandableItemComponent
                        key={item.category_name}
                        onClickFunction={this.updateLayout.bind(this, key)}
                        item={item}
                        updateSalonData = {this.updateSalonData.bind(this, item)}/>
                            ))}
           </ScrollView>
        </View>
     );
   }
}

ExpandableItemComponent.js：

 import React, { Component } from 'react';
 import { LayoutAnimation, StyleSheet, View, Text, ScrollView, UIManager, TouchableOpacity, Platform, } from 'react-native';

   export default class ExpandableItemComponent extends Component {
   //Custom Component for the Expandable List
    constructor(props) {
     super(props);
      console.log('props: ' + JSON.stringify(props.item));     
     this.state = {
       layoutHeight: 0,
       dataSource:props.item,
   };
 }  

    componentWillReceiveProps(nextProps) {   
      console.log('componentWillReceiveProps'); 
      if (nextProps.item.isExpanded) {
      this.setState(() => {
        return {
          layoutHeight: null,
       };
    });
   } else {
    this.setState(() => {
      return {
        layoutHeight: 0,
      };
    });
 }
console.log('next Item: ' + JSON.stringify(nextProps.item) + "\n"); 
this.setState(() => {
  return {
    dataSource: nextProps.item,
      };
    });
  }
  shouldComponentUpdate(nextProps, nextState) {
     if (this.state.layoutHeight !== nextState.layoutHeight) {
       return true;
      }
     return false;
  }

   setItemCount = (id) =>
    {        
      const tempItem = this.props.item;
      const data = this.props.item.subcategory;
      const index = data.findIndex(x => x.id === id);
      // console.log('pricing Index: ' + index);
      if (index !== -1) {
        data[index]["cartCount"] = 10; 
        tempItem.subcategory = data;               
        this.props.updateSalonData(tempItem);
    } 
 }

  render() {

return (
  <View>

    {/*Header of the Expandable List Item*/}
    <TouchableOpacity
      activeOpacity={0.8}
      onPress={this.props.onClickFunction}
      style={styles.header}>
      <Text style={styles.headerText}>{this.state.dataSource.category_name}</Text>
    </TouchableOpacity>
    <View
      style={{
        height: this.state.layoutHeight,
        overflow: 'hidden',
      }}>
      {/*Content under the header of the Expandable List Item*/}
      {this.state.dataSource.subcategory.map((item, key) => (
        <TouchableOpacity
          key={key}
          style={styles.content}
          onPress={() => alert('Id: ' + item.id + ' val: ' + item.val)}>
          <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
            <Text style={styles.text}>{item.val}</Text>

            <View style={{ flexDirection: 'row', alignSelf: 'center', }}>
              <Text style={styles.text}>{item.val}</Text>
              <View style={{ height: 25, width: 75, flexDirection: 'row', borderRadius: 15, borderWidth: 1, alignSelf: 'center', justifyContent: 'space-evenly', borderColor: 'orange', overflow: 'hidden' }}>

                <View style={{ alignContent: 'center', justifyContent: 'center' }}>
                  <Text onPress={()=>{this.setItemCount(item.id)}} style={{ width: 25, height: 25, fontSize: 12, color: 'orange', fontWeight: 'bold', textAlign: 'center', textAlignVertical: 'center' }}>+</Text>
                </View>
                <View style={{ borderWidth: 1, borderColor: 'orange', backgroundColor: 'orange', alignContent: 'center', justifyContent: 'center' }}>
                  <Text style={{ width: 25, height: 25, fontSize: 12, color: 'white', fontWeight: 'bold', textAlign: 'center', textAlignVertical: 'center' }}>{item.cartCount}</Text>
                </View>
                <View style={{ alignContent: 'center', justifyContent: 'center' }}>
                  <Text style={{ width: 25, height: 25, fontSize: 12, color: 'orange', fontWeight: 'bold', textAlign: 'center', textAlignVertical: 'center' }}>-</Text>
                </View>

              </View>
            </View>
          </View>

          {/* <View style={styles.separator} /> */}
        </TouchableOpacity>
      ))}
    </View>
    <View style={styles.separator} />
  </View>
);
 }
 }

现在的问题是，当我单击“ +”按钮时，计数实际上在代码中增加了，但未在UI中更新。但是，当我折叠并展开同一项目时，现在值已更新。单击+按钮后，请有人指导我更新计数。

Answer 1

您可以替换this.state.dataSource来将this.props.updateSalonData定向到ExpandableItemComponent.js

如果在父类中进行了更新，则将在子类中自动进行更新。

例如：

...
{this.props.updateSalonData.subcategory.map((item, key) => (

....

像这样

如何在React Native中更新/刷新可扩展列表视图

1 个答案: