Javascript Disacthing actions creator使用componentWillMount调用了两次

我使用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);
            });
    }
}

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!'}
    }


}

这是我的减速机：

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);
            });
    }
}

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);

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
从'react redux'导入{connect}；
从“操作/管理操作”导入*作为操作；
类管理扩展组件{
组件willmount（）{
this.props.fetchAdmin（）
}
renderData（）{
var lists=this.props.lists；
控制台日志（列表）；
}
render（）{
返回(
{this.renderData（）}
)
}
常量mapStateToProps=（状态）=>{
返回{lists:state.admin.lists}；
}
导出默认连接（MapStateTops，actions）（管理）；

从屏幕截图中，我假设render（）被调用了两次。第一次调用转到默认的action creator，因此结果是“YEY！”，第二次是有效的

---

有人能给我解释一下为什么ComponentMount会这样执行，实际上在第一次渲染中，我只想知道我的数组不是“YEY！”如何解决这个问题？谢谢。

这里没有问题！当您的组件第一次渲染时，它在逻辑

componentWillMount

完成之前到达渲染，因此：

第一次渲染：渲染组件时，全局状态下的

列表

是默认值，等于

YEY！

第二次渲染：成功获取数据后，全局状态下的

列表

中的减速机将与已获取的减速机一起更改，之后您的组件检测到由于从全局状态获取

列表

的

MapStateTrops

而导致的更改

不用说，React组件在propsChange上重新呈现，这就是为什么有一个方法

componentWillReceiveProps

，以便您可以在每次更改道具时添加一些逻辑（如果需要）

此行为允许您通过以下方式处理等待提取数据的操作：

• 添加加载微调器
• 让你的布局呈现
• 使页面中的其他组件呈现

---

这里没有问题！当您的组件第一次渲染时，它在逻辑

组件将挂载

完成之前到达渲染，因此：

第一次渲染：渲染组件时，全局状态下的

列表

是默认值，等于

YEY！

第二次渲染：成功获取数据后，全局状态下的

列表

中的减速机将与已获取的减速机一起更改，之后您的组件检测到由于从全局状态获取

列表

的

MapStateTrops

而导致的更改

不用说，React组件在propsChange上重新呈现，这就是为什么有一个方法

componentWillReceiveProps

，以便您可以在每次更改道具时添加一些逻辑（如果需要）

此行为允许您通过以下方式处理等待提取数据的操作：

• 添加加载微调器
• 让你的布局呈现
• 使页面中的其他组件呈现

---

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

因此，React已经在状态仍然为“Yey”的情况下进行了渲染。这就是它应该是的样子，也是Redux的美妙之处，操作是fire and forget，它们没有阻塞。如果React等待HTTP请求完成，用户体验将是可怕的

---

如果不希望它呈现“Yey”，则应在请求仍挂起时显示加载程序或其他内容。

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

因此，React已经在状态仍然为“Yey”的情况下进行了渲染。这就是它应该是的样子，也是Redux的美妙之处，操作是fire and forget，它们没有阻塞。如果React等待HTTP请求完成，用户体验将是可怕的

---

如果您不想让它呈现“Yey”，则应在请求仍挂起时显示加载器或其他内容。

我应将componentWillReceiveProps放在何处？我已将componentWillMount更改为componentWillReceiveProps，结果仅为“Yey”@basimt如果你的用例需要一些逻辑，这很有用，但在这种情况下我不这么认为。实际上，在第一次渲染中，我只希望我的数组不是“YEY！”如何解决此问题？@BasimIn您在reducer中的默认情况下，只需按原样返回状态

返回状态

，但您需要初始化

列表

数组，因此它将是

返回{state，list:[]}

我更改了它，结果是空数组[]在默认减速器上。是否可以仅调用

获取数据

，我不希望容器调用默认减速器。是否可以？@basim我应该将componentWillReceiveProps放在哪里？我将componentWillMount更改为componentWillReceiveProps结果仅为“YEY”@basimt如果你的用例需要一些逻辑，这很有用，但在这种情况下我不这么认为。实际上，在第一次渲染中，我只希望我的数组不是“YEY！”如何解决此问题？@BasimIn您在reducer中的默认情况下，只需按原样返回状态

返回状态

，但您需要初始化

列表

数组，因此它将是

返回{state，list:[]}

我更改了它，结果是空数组[]在默认的减速机上。是否可以只调用

FETCH\u DATA

，我不想要我的容器c