0

У меня есть компонент с кнопкой в которую передается свойство quantity. От этого свойства зависит, какое состояние isActive будет у кнопки. Сначала я это условие написал в конструкторе, всё работает чётко. Но на сценах имеющих свои состояния в момент перерисовки сцены кнопка также перерисовывается, но без участия конструктора. В итоге после смены свойства quantity состояние не меняется.

Если я уберу состояние isActive и буду использовать только свойство quantity, я не смогу влиять на отображение. Потому что такого метода как setProp не существует. А если я установлю значение напрямую в this.props и выполню forceUpdate может быть сработает, но мне кажется это костыльное решение. Подскажите, как наладить связь или как лучше сделать?

Screen.js

<Favorite quantity={data.favorite_count} id={data.id} />

Favorite.js

import React, { Component } from 'react';
import { TouchableOpacity, Image } from 'react-native';

export default class Favorite extends Component {
  state = {
    isActive: false
  };
  constructor(props) {
    super(props);

    if (this.props.quantity > 0)
      this.state.isActive = true;
  }
  render() {
    let icon;

    if (this.state.isActive)
      icon = require('../assets/btn-unfavorite.png');
    else
      icon = require('../assets/btn-favorite.png');

    return (
      <TouchableOpacity style={this.props.style} onPress={this.onPress.bind(this)}>
        <Image source={icon} />
      </TouchableOpacity>
    );
  }
  onPress() {
    this.setState(previousState => (
      { isActive: !previousState.isActive }
    ));
  }
}

2 ответа 2

1

Не стоит использовать componentDidUpdate. Есть getDerivedStateFromProps, раньше был componentWillReceiveProps.

Можно еще проще сделать...

<Favorite key={quantity} />

При изменении key react пересоздает компонент.

1
  • Хм, getDerivedStateFromProps вызывается даже при первоначальном монтировании, не придется дублировать код в конструкторе. Спасибо, опробую. 4 мая 2019 в 9:45
0

Решил проблему добавлением метода componentDidUpdate, подробная информация в документации к обычному react. Если будут другие предложения с радостью ознакомлюсь.

import React, { Component } from 'react';
import { TouchableOpacity, Image } from 'react-native';

export default class Favorite extends Component {
  state = {
    isActive: false
  };
  constructor(props) {
    super(props);

    if (this.props.quantity > 0)
      this.state.isActive = true;
  }
  componentDidUpdate(prevProps) {
    if (this.props.quantity !== prevProps.quantity) {
      this.setState({ isActive: (this.props.quantity > 0) });
    }
  }
  render() {
    let icon;

    if (this.state.isActive)
      icon = require('../assets/btn-unfavorite.png');
    else
      icon = require('../assets/btn-favorite.png');

    return (
      <TouchableOpacity style={this.props.style} onPress={this.onPress.bind(this)}>
        <Image source={icon} />
      </TouchableOpacity>
    );
  }
  onPress() {
    this.setState(previousState => (
      { isActive: !previousState.isActive }
    ));
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.