Redux抛出错误说无法在'Node'上执行'insertBefore'：

Question

我正在处理我的反应应用程序并收到此错误

 Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

我根据控制台在我的redux操作中得到了这个。

这是我的行动和减少者

const INITIAL_STATE = {
    sidebarImageOption: 1,
    politicianList: null,
    selectedPoliticianRow: 1,

    movieActorList:null,
    selectedMovieActorRow:1
}

const FETCH_MOVIE_ACTOR_LIST = 'FETCH_MOVIE_ACTOR_LIST'
const fetchMovieActorList = (token, page)=> (dispatch)=> {
    dispatch({type: FETCH_MOVIE_ACTOR_LIST});
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": url,
        "method": "GET",
        "headers": {
            Authorization: token
        },
        success: function (response, textStatus, jQxhr) {
        },
    }
    $.ajax(settings).done((response) => {
        dispatch(fetchMovieActorSuccess(response.results))
        console.log(response.results)
    });
}

const FETCH_MOVIE_ACTOR_LIST_SUCCESS = 'FETCH_MOVIE_ACTOR_LIST_SUCCESS'
const fetchMovieActorSuccess = (list)=> (dispatch) => {
    console.log('Received List: ', list)
    dispatch({type: FETCH_MOVIE_ACTOR_LIST_SUCCESS,
        payload: list});

}


export default function ImageReducer(state = INITIAL_STATE, action){
    switch(action.type){
        case FETCH_POLITICIAN_LIST_SUCCESS:
            return {...state, politicianList : action.payload};
            break;
        case SELECTED_POLITICIAN_ROW:
            return {...state, selectedPoliticianRow : action.payload};
            break;
        case FETCH_MOVIE_ACTOR_LIST_SUCCESS:
            return {...state, movieActorList : action.payload};
            break;
        case SELECTED_MOVIE_ACTOR_ROW:
            return {...state, selectedMovieActorRow : action.payload};
            break;

        default:
            return state
    }
}

我在componentWillMount方法中的一个反应组件中调用了动作“fetchMovieActorList”。

componentWillMount() {
        this.props.fetchMovieActorList("Token " + this.props.token_reducer.token, this.state.loadPage)
    }

获取列表后，我在渲染方法中使用它来显示内容。

我收到此错误

Answer 1

您需要将fetchMovieActorList的结果发送到redux商店，如下所示：

   componentWillMount() {
        this.props.dispatch(this.props.fetchMovieActorList("Token " + this.props.token_reducer.token, this.state.loadPage))
    }

您还需要将redux-thunk集成到index.js中的商店创建流程中，例如像这样：

import thunkMiddleware from "redux-thunk";
import {createStore, applyMiddleware} from "redux";

const store = createStore(reducers, applyMiddleware( thunkMiddleware ) );

然后，您可以在渲染功能中访问this.props.movieActorList，并且只要它们可用，它就会包含后端调用的结果。

此外，其他操作不必是异步的：

const fetchMovieActorSuccess = list => 
      ({type: FETCH_MOVIE_ACTOR_LIST_SUCCESS, payload: list});