Question

我的问题是，当我向＆＃34; entriesPerDay＆＃34;添加元素时，我的单位列表没有被更新。在我的Redux商店。主屏幕和Flat List都有状态映射到props。我试过了： - 通过Home Screen中的道具将数据传递给EntriesList - 使用reducer中的状态作为EntriesList

的数据提供者

似乎没有任何工作，并且永远不会调用shouldComponentUpdate或任何其他相关函数。减速机：

 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>
      );
    }

FLAT LIST：

    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来返回一个新数组（新引用）

使用Redux（React Native）提供的数据时，Flat List未更新

1 个答案: