Question

我使用 componentWillMount方法调用action creator ，然后调用两次。请看下面的结果截图。

这是我的行动创建者：

export function fetchAdmin(){
    return (dispatch)=>{
        axios.get(`${Config.API_URL}/admin`,{
            headers: { authorization: localStorage.getItem('token')}
        })
            .then(response => {
                   return dispatch({
                        type: FETCH_DATA,
                        payload: response.data
                    });
                }
            )
            .catch(response => {
                console.log(response);
            });
    }
}

这是我的 reducer ：

import { FETCH_DATA } from '../actions/types';

export function admin(state= {}, action){
    switch(action.type){
        case FETCH_DATA:
            return {...state, lists: action.payload };
        default:
            return { state, lists: 'YEY!'}
    }


}

这是我的容器以及我使用componentWillMount调用我的动作创建者的方式。

import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import * as actions from 'actions/admin_action';


class Admin extends Component{
    componentWillMount(){
        this.props.fetchAdmin()
    }
    renderData(){
        var lists = this.props.lists;
        console.log(lists);
    }
  render(){

        return(
          <div>
            {this.renderData()}
          </div>
        )
  }

const mapStateToProps = (state) => {
     return { lists: state.admin.lists };
}

export default connect(mapStateToProps, actions)(Admin);

从截图中我假设render（）被调用两次。第一个调用转到默认操作创建者，结果是“YEY！”第二个是有效的。

有人可以向我解释为什么componentWillMount会像这样执行并且实际上在第一次渲染中我只想要我的数组而不是“YEY！”如何解决这个问题呢？谢谢。

Answer 1

这里没有问题！当您的组件第一次渲染时，它会在逻辑componentWillMount完成之前到达渲染，因此：

第一次渲染：渲染您的组件，而全局状态中的lists是默认值，等于YEY!。

第二次呈现：成功获取数据后，在全局状态下，{1}}中的reducer更改为已获取的数据，之后您的组件会检测到由于lists从全球状态获得mapStateToProps。

毋庸置疑，在propsChange上重新呈现了React组件，这就是为什么有一个方法lists，这样你就可以在每次你的道具改变时添加一些逻辑（如果你需要的话）。

此行为允许您处理等待提取的数据：

添加加载微调器。
渲染您的布局。
获取页面中的其他组件。

Answer 2

Javascript是异步的。您正在执行的HTTP请求是异步的。这意味着在HTTP请求仍处于挂起状态时Javascript继续执行。

所以React已经呈现，而状态仍然是'Yey'。这就是它应该如何以及Redux的美丽，行动是火和忘记，它们不会阻挡。如果React会等待HTTP请求完成，用户体验将会非常糟糕！

如果您不希望它呈现'Yey'。您应该在请求仍处于待处理状态时显示加载程序或其他内容。

使用componentWillMount调用dispacthing actions creator两次

2 个答案: