Реагировать на собственное состояние обновления в FlatList - PullRequest
Новая
       6

Реагировать на собственное состояние обновления в FlatList

0 голосов
/ 26 января 2019

Я создаю приложение электронной коммерции с React Native. Я застрял с проблемой. На странице «Корзина» я хочу показать общую стоимость товаров.

У меня в общем состоянии StatePrice установлено значение 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>

    );

  }
}

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Не используйте setState внутри вашего component.if, если вы хотите получить totalPrice, вы можете сделать то же самое: 

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

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

здесь мы используем "уменьшить" синтаксис ES6. Я надеюсь, что это поможет вам

0 голосов
/ 27 января 2019

Внутри renderItem вам нужно вернуть компонент, а не функцию.

ваш 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 без причины. и это хорошая практика, чтобы сначала инициализировать ваше состояние. Изначально вы можете установить переменную data или источник данных в пустой массив внутри вашего состояния

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

...