Плоский список не обновляется, когда данные поставляются с Redux (React Native)

Question

Моя проблема в том, что мой плоский список не обновляется, когда я добавляю элемент к "recordsPerDay" в моем магазине Redux.И домашний экран, и плоский список имеют состояние, сопоставленное с реквизитом.Я попытался: - передать данные в EntriesList через реквизиты с домашнего экрана - используя состояние от редуктора в качестве поставщика данных EntriesList

Кажется, что ничего не работает, и mustComponentUpdate или любая другая соответствующая функция никогда не вызывается.РЕДУКТОР:

 case NEW_ENTRY_LOCAL:

        let newState = {...state};
        newState.entriesPerDay.push(action.entry);

        return{
            ...newState
        }

ГЛАВНЫЙ ЭКРАН:

 (...)
 render() {  

      return (

        <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'flex-start' }}>
         <NavBar onItemPressed={this.onItemPressedHandler}/>
          <DayPicker onDatePicked={this.onDatePickedHandler} />
          <TotalTime totalTime={this.props.total} />
          <EntriesList entries={this.props.entriesPerDay}/>
          <Timer onEntryEnd={this.onEntryEndHandler} onTimeChanged={this.onTimeChangedHandler} onEntryCreate={this.onEntryCreateHandler}/>
          <Button title="clickkk" onPress={this.onItemPressedHandler}>CLICK ME</Button>
        </View>
      );
    }

ПЛОЩАДКА:

    class entriesList extends React.Component {




  componentDidMount()
  {
     reactMixin(entriesList, TimerMixin); 
     this.timer = setInterval(() =>  {

      console.log(this.props.entriesPerDay);

   }, 3000);

  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  shouldComponentUpdate(nextProps, nextState)
  {
    console.log("new props" + nextProps);
    return true;
  }


  render()
    {

    return (

        <FlatList style={styles.full}
        data={this.props.entries}
        extraData={this.props.entriesPerDay}
        renderItem={
          (info)=>(
            <ListItem  key={info.item.key}
             startDateTime={info.item.startDateTime}
             endDateTime = {info.item.endDateTime}
             description = {info.item.description}
             prevEntryEnd = {info.item.prevEntryEnd}
             nextEntryStart = {info.item.nextEntryStart}
             total = {info.item.totalTime}
             />
          )
        }

        />
    );
  }
}


const mapStateToProps = state => {
  return {
    serverCopy : state.entries.serverCopy,
    entriesPerDay : state.entries.entriesPerDay, 
    pickedDate : state.entries.pickedDate,
    total: state.entries.total,
    local: state.entries.local
  };
};

const mapDispatchToProps = dispatch => {
  return {
      onPickDate: (day) => dispatch(pickDay(day)),
      onDataSet: (data) => dispatch(setData(data)),
      onNewEntryLocal: (entry) => dispatch(newEntryLocal(entry)),
      onEndEntryLocal: (entry) => dispatch(endEntryLocal(entry)),


  };
};

export default connect(mapStateToProps, mapDispatchToProps)(entriesList)

;

Answer 1

Попробуйте:

 case NEW_ENTRY_LOCAL:

        let newEntriesPerDay = state.entriesPerDay.concat(action.entry);

        return {
            ...state,
            entriesPerDay: newEntriesPerDay
        }

Это потому, что entriesPerDay просто копировался по ссылке в newState в вашем предыдущем примере.redux и react сравните ссылку и увидите, что она одинакова, поэтому повторного рендеринга не произойдет.Вот почему вы должны скопировать его вручную.

Примечание: используйте concat вместо push для возврата нового массива (новая ссылка)