получение нулевого и фактического результата при выборке API в react

#reactjs #redux

Вопрос:

Я попытался выполнить какой-либо react, извлекающий api из typicode.com , но каким-то образом он возвращает 2 набора реквизита. Один нуль, а другой — фактические данные.

Я попытался удалить начальное состояние в редукторе. Я переместил вызовы из перехвата жизненного цикла componentDidMount в componentWillMount() .

Я использую промежуточное программное обеспечение redux thunk.

Это редукторы:

 const initialState =[{}]

const postReducer = (state=initialState , action) =>{


    switch(action.type){

        case "FETCH_POST":
            return { ...state, forumPosts:action.payload};

        default:
            return state;

    }
}

export default postReducer;

это действия:

 import axios from 'axios';


export const fetchPosts = ()=>dispatch =>{
        axios.get(`https://jsonplaceholder.typicode.com/posts`)
        .then(res =>(
        dispatch({type: "FETCH_POST", payload:res.data }) 
    )
    )
    .catch(err => dispatch({type: "FETCH_POST", payload : {}}))


}

это основные приложения:

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux';
import  {fetchPosts} from './actions/postActions'


class App extends Component {
  componentWillMount(){
    this.props.fetchPosts();    
  }
  render() {
     const {forumPosts } = this.props;
     console.log(forumPosts)

    return (


      <div className="App">

      </div>
    )

  }
}

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



export default connect(mapStateToProps, {fetchPosts})(App);

вот хранилище:

 const store = createStore(postReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Ожидаемый результат — список фиктивных записей из typicode, но сначала он возвращает null, а затем фактические фиктивные данные.

1. Я думаю, что проблема в mapStateToProps . Должно быть state.REDUCER. forumPosts , вы можете попробовать выполнить console.log (state) перед вашим возвращением, чтобы увидеть вашу структуру!

2. Привет, Тоби, да, я пытался console.log (state) это дает мне два объекта: предыдущее пустое состояние null и состояние после завершения загрузки сообщений

3. Да, но есть ли у объекта ключ? Подобное состояние: {postReducer: null} и {postReducer: {forumPosts: ....}}

Ответ №1:

Я думаю, вы допускаете ошибку в reducer, поскольку я вижу, что вы ожидаете массив object as posts и используете оператор распространения с object вместо array, попробуйте это, это решит вашу проблему,

 const initialState = [{}];

const forumPosts = (state = initialState , action) => {


    switch(action.type) {

        case "FETCH_POST":
            return  [ ...state, ...action.payload ]; // merging 2 arrays using spread oprator

        default:
            return state;

    }
}

export default forumPosts;