Question

在我的componentDidMount（）中，我在redux文件中调用一个actionCreator进行API调用以获取项目列表。然后，该项目列表将添加到redux存储中，我可以通过mapStateToProps从我的组件中访问该存储。

const mapStateToProps = state => {
    return {
        list: state.list
    };
};

所以在我的render（）中，我有：

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

现在，在页面加载时，我需要运行一个需要在此list上映射的函数。

假设我有此方法：

someFunction(list) {
    // A function that makes use of list
}

但是我在哪里称呼它？我必须在列表已经可用时调用它，因为我的函数会给我一个错误，列表为undefined（如果尚不可用）。

我也不能在render中（在return语句之前）调用它，因为它给我一个错误，那就是render（）必须是纯净的。

还有其他可以使用的生命周期方法吗？

Answer 1

这是使用Redux接收到的道具的两种方式

在渲染中完成

  render() {
       const { list } = this.props;
       const items = list && list.map((item, index) => {
             return <li key={item.id}>{item.value}</li>
       });
       return(
            <div>
                 {items}
           </div>
       );
    }

或者如果您未使用react 16.3或更高版本，请在componentWillReceiveProps方法中进行操作

 this.state = {
      items: []
}
 componentWillReceiveProps(nextProps){
       if(nextProps.list != this.props.list){
            const items = nextProps.list &&    nextProps.list.map((item, index) => {
                  return <li key={item.id}>{item.value}</li>
             });
             this.setState({items: items});
        }
    }

    render() {
        const {items} = this.state;
        return(
           <div>
               {items}
           </div>
        );
     }

如果您将Api调用放置在componentWillMount或从父级接收道具，则也可以在componentDidMount中进行操作。

Answer 2

只需执行此操作，然后在redux存储中确保list的初始状态应为[]

const mapStateToProps = state => {
    return {
        list: someFunction(state.list)
    };
};

页面加载后如何自动运行功能？

2 个答案: