Изменение состояния не отражается на пользовательском интерфейсе дочернего компонента - PullRequest
Новая
       41

Изменение состояния не отражается на пользовательском интерфейсе дочернего компонента

0 голосов
/ 30 мая 2019

У меня есть два компонента FirstParent и SecondParent Оба они имеют один и тот же дочерний компонент Дочерний .

Если я нажимаю на иконку в FirstParent , состояние (приставка) обновляется, а пользовательский интерфейс отображает значение Text как 20.

Но если я сделаю то же самое с SecondParent , обновляется только состояние (redux), но пользовательский интерфейс не отображает значение Text как 20.

Что мне здесь не хватает?

FirstParentComponent 

handleRender = ({ item }) => {
  // some code here
  return (
    <Child foo={item} />
  )
}

render() {
  <FlatList
    renderItem={this.handleRender}
    // other attributes
  />
}

SecondParentComponent 

render() {
  const { item } = this.props;

  // some code here
  <Child foo={item} />
}

// some code here
const mapStateToProps = (state, ownProps) => (
  const item = state.data.find(
    foo => foo.id === ownProps.navigation.getParam('foo', {}).id)
  )
 return { item };
);

ChildComponent 

updateFoo = (id, value) => {
  const { updateReduxState} = this.props;

  // some code here
  updateReduxState({ id, value })
}

render() {
  const { foo: { id, value} } = this.props;

  // some code here
  <Icon onPress={() => { this.updateFoo(id, 20); }}
  <Text>{value}</Text>
}

// some code here
const mapDispatchToProps = dispatch => (
  bindActionCreators(
      { updateReduxState: updateValue},
       dispatch,
    )
  )
);

1 Ответ

0 голосов
/ 30 мая 2019

Мне удалось заставить второй компонент отражать изменения в состоянии, перемещая вещи вокруг.Но я все еще не удовлетворен, так как теперь мне приходится перебирать состояние, чтобы получить элемент.

FirstParentComponent 

handleRender = ({ item }) => {
  // some code here
  return (
    <Child fooId={item.id} />
  )
}

render() {
  <FlatList
    renderItem={this.handleRender}
    // other attributes
  />
}

SecondParentComponent 

render() {
  const { itemId } = this.props;

  // some code here
  <Child fooId={itemId} />
}

ChildComponent 

updateFoo = (id, value) => {
  const { updateReduxState} = this.props;

  // some code here
  updateReduxState({ id, value })
}

render() {
  const { foo: { id, value} } = this.props;

  // some code here
  <Icon onPress={() => { this.updateFoo(id, 20); }}
  <Text>{value}</Text>
}

// some code here
const mapStateToProps = (state, ownProps) => (
  const foo = state.data.find(
    foo => foo.id === ownProps.fooId)
  )
 return { foo };
);

const mapDispatchToProps = dispatch => (
  bindActionCreators(
      { updateReduxState: updateValue},
       dispatch,
    )
  )
);
...