Question

一个组件调度一个修改Redux store的动作，另一个组件应该将改变后的状态改为道具和重新渲染。

问题是，组件获取道具，它们是正确的并且已经修改，但组件永远不会被重新渲染。

有人能帮忙，被困太多了..

Component who uses store:

在mount上执行http请求，当州改变时应该重新投降。

class CalendarView extends Component {

 componentDidMount() {
   axios.get('http://localhost:3000/api/bookings/get')
    .then(foundBookings => {
     this.props.getBookings(foundBookings);
    })
  .catch(e => console.log(e))
 }

 render() { 
  return (
   <Agenda
    items={this.props.items} 
    selected={this.props.today}
    maxDate={this.props.lastDay}
    onDayPress={this.props.setDay}
    renderItem={this.renderItem}
    renderEmptyDate={this.renderEmptyDate}
    rowHasChanged={this.rowHasChanged}
   />
  );
 }

 renderItem = (item) => {
   return (
     <View style={[styles.item, { height: item.height }]}>
       <Text>Name: {item.name} {item.surname}</Text>
       <Text>Time: {item.time}</Text>
     </View>
   );
 }

 renderEmptyDate = () => {
    return (
    <View style={styles.emptyDate}><Text>This is empty date!</Text></View>
    );
 }

 rowHasChanged = (r1, r2) => {
  console.log('hit')
  return true;
 }

}

const mapStateToProps = (state, ownProps) => {
 return {
   today: state.app.today,
   lastDay: state.app.lastDay,
   items: state.app.items
  }
}

const mapDispatchToProps = (dispatch) => {
 return {
   setDay: date => dispatch(appActions.setSelectionDate(date.dateString)),
   getBookings: data => dispatch(appActions.getBookings(data)), 
  }
 }

export default connect(mapStateToProps, mapDispatchToProps)(CalendarView);

Action Dispatching:

调度修改状态的动作

onSubmit = (name, surname, selectionDate, selectionTime) => {
   axios.post('http://localhost:3000/api/bookings/create', {
     bookerName: name,
     bookerSurname: surname,
     bookerTime: selectionTime,
     date: selectionDate
   }).then(savedBookings => {
    this.props.createBooking(savedBookings);
    this.props.navigator.pop({
      animationType: 'slide-down',
   });
  }).catch(e => console.log(e))
 }

const mapStateToProps = state => {
 //...
}

const mapDispatchToProps = (dispatch) => {
  return {
   createBooking: data => dispatch(appActions.createBooking(data))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(NewBookingScreen);

Reducer:

case types.CREATE_BOOKING: {
  const { date , bookings } = action.savedBookings.data;
  let dateArr = state.items;
  // formatting a booking how needed
  Object.keys(dateArr).forEach(key => {
    if (key == date) {
      dateArr[key] = [];
      bookings.map(oneBooking => {
        dateArr[key].push({
          name: oneBooking.bookerName,
          surname: oneBooking.bookerSurname,
          time: oneBooking.bookerTime,
          height: Math.max(50, Math.floor(Math.random() * 150))
        });
      })
    }
  });
  return {
    ...state,
    items: dateArr
  };
}

如果需要，请提供完整的回购：https://github.com/adtm/tom-airbnb/tree/feature/redux

提前谢谢你！

Answer 1

你的减速器正在改变状态，所以"@"认为没有任何改变。此外，您对" "的调用是错误的，因为您没有使用结果值。

不要在数组上调用". "，除非它是副本。另外，请不要在减速机中使用任何随机性。

有关详细信息，请参阅http://redux.js.org/docs/faq/ReactRedux.html#react-not-rerendering，http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html和https://daveceddia.com/random-numbers-in-redux/。

connect（）不会重新渲染组件

1 个答案: