Question

尽管我的react组件的道具已经更新，但我并未重新渲染它，我也不明白为什么。

这是我的组成部分

import { fetchLocations } from 'state/locations/actions';

class Event extends React.Component {

  componentDidMount() {
    this.props.fetchLocations();
  }

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

    return <span>{locations.map((l) => {return <span>{l}</span>;})}</span>;
  }
}

const mapStateToProps = (state) => ({
  locations: state.locations
})

export default connect(                                                                                                                                               
  mapStateToProps,                                                                                                                                                    
  { fetchLocations },                                                                                                                                                 
)(Event);

这是我的位置信息文件

export const fetchLocations = () = (dispatch) => {
  axios.get('/api/locations')
  .then(response => {
    const locations = response.data;

    dispatch({ type: FETCH_LOCATIONS_SUCCESS, payload: locations });
  });
}

还有我的实体减速器

function entities(state = { locations: {} }, action) {
  switch (action.type) {
    case FETCH_LOCATIONS_SUCCESS:
      return Object.assign({}, state, {
        locations: action.payload
      })
    default:
      return state
  }
}

此后，我的Event组件应重新呈现。没有。使用react dev tools chrome扩展，我看到的确确实是props的位置，但是它们没有显示在UI上。

如果我通过转到另一个页面来卸载组件并重新安装，则位置会正确显示。

除了重新渲染未触发之外，其他一切看起来都正常。 componentDidUpdate永远不会被解雇。

如果我在任意一秒钟之后手动执行setTimeout至forceUpdate，它们就会显示。

为什么我的组件不重新渲染？

Answer 1

请尝试将关键道具添加到render方法的span元素中。 locations.map((l,key)=> <span key={key} >{l} </span>

React-redux组件未在商店道具更改时重新呈现

1 个答案: