0

我正在使用 redux 将菜单数据存储在商店中。

它工作正常，但是一旦我通过调度更新存储，组件就不会重新渲染，如果我使用this.forceUpadate它可以工作但我不想使用它。有什么解决方案。

代码

class MenuContents extends Component {
  constructor() {
    super();  
    this.state = {
      menu : []
    }    
  }
  componentDidMount() {
    // populate the left menu
    fetch("./services/left-menu.json")
    .then(res => res.json())
    .then(data => {
      store.dispatch( addLeftMenu(data))
      this.forceUpdate(); // I dont want to use this
    }).catch(function() {
      console.log("An error occured during fetch operation.");
    });
  }
  render() {
    let storeValue = store.getState();
    const leftMenu = storeValue.leftMenu[0];

    const isMenuLoaded = leftMenu !== undefined && leftMenu !== "";
    let menuContents;
    let menu;

    if(isMenuLoaded) {
        menuContents = leftMenu.map((menuItem, index)=> {

        menu = <li role="presentation" key={index}>
                  <a className="accordion-toggle" data-toggle="accordion" href="#">
                  {menuItem.name}
                  </a>

              </li>;
        return menu;
      }
      );
      menuContents = <ul className="nav nav-pills nav-stacked"> {menuContents} </ul>;
    }
    else {
      menuContents = <Spinner />
    }
    return (<div>{menuContents}</div>);
  }
}

export default MenuContents;

请参阅下面的减速器代码。

减速器/index.js

import { ADD_LEFT_MENU } from "../constants/action-types";

const initialState = {
  leftMenu: []
};
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_LEFT_MENU:
    return { ...state, leftMenu: [...state.leftMenu, action.payload]};
    default:
      return state;
  }
};
export default rootReducer;
4

3 回答 3

1 
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class MenuContents extends Component {
  constructor() {
    super();  
    this.state = {
      menu : []
    }    
  }
  componentDidMount() {
    // populate the left menu
    fetch("./services/left-menu.json")
    .then(res => res.json())
    .then(data => {
      store.dispatch( addLeftMenu(data))
    }).catch(function() {
      console.log("An error occured during fetch operation.");
    });
  }
  render() {
    let storeValue = store.getState();
    const leftMenu = storeValue.leftMenu[0];

    const isMenuLoaded = leftMenu !== undefined && leftMenu !== "";
    let menuContents;
    let menu;

    if(isMenuLoaded) {
        menuContents = leftMenu.map((menuItem, index)=> {

        menu = <li role="presentation" key={index}>
                  <a className="accordion-toggle" data-toggle="accordion" href="#">
                  {menuItem.name}
                  </a>

              </li>;
        return menu;
      }
      );
      menuContents = <ul className="nav nav-pills nav-stacked"> {menuContents} </ul>;
    }
    else {
      menuContents = <Spinner />
    }
    return (<div>{menuContents}</div>);
  }
}

const mapStateToProps = state => ({
   leftMenu: state.leftMenu,
});

const mapDispatchToProps = dispatch => ({
   addLeftMenu: bindActionCreators(addLeftMenu, dispatch),
});


export default connect(mapStateToProps, mapDispatchToProps)(MenuContents);
于 2018-08-29T10:14:52.767 回答
1

如果你的 fetch 调用没有改变组件的 props 或状态，React 就无法知道你的组件需要重新渲染。您应该将您的组件与 react-redux 连接起来。直接在组件中访问 redux 存储不是通常的做法，不建议这样做。大多数生态系统都是围绕连接的组件构建的。

于 2018-08-29T07:51:05.693 回答
1

我认为脱离 Sakhi Mansoor 所说的，你想将你的组件连接到 redux 商店。这是一篇我认为解释得很好的文章：

https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4

基本上反应组件在其状态或道具发生变化时重新渲染。现在你有一个组件，你有一个商店。需要发生的是，您将触发一些操作，这些操作将返回一些供减速器使用的东西。reducer 将更新 redux 存储。然后理想情况下，商店将更新组件的道具，然后触发重新渲染。

我认为你缺少的是最后一部分。当你像他们在文章中那样调用 connect 时，它会将 store 连接到组件。因此，每当 store 的某些部分发生变化时，它都会更新组件中相关的 props。

于 2018-08-29T08:41:19.660 回答