Question

我正在学习reactjs + redux-thunk并实现了以下修改后的代码（从其他网站复制原件）：

 //reducers/items.js
 export function itemsHasErrored(state = false, action) {
    switch (action.type) {
        case 'ITEMS_HAS_ERRORED':
            return action.hasErrored;
        default:
            return state;
    }
}
export function itemsIsLoading(state = false, action) {
    switch (action.type) {
        case 'ITEMS_IS_LOADING':
            return action.isLoading;
        default:
            return state;
    }
}
export function items(state = {}, action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;
        default:
            return state;
    }
}

//App.js
import React, { Component } from 'react';

import ItemList from './components/ItemList';


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <ItemList/>
      </div>
    );
  }
}

export default App;


//ItemList.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { itemsFetchData } from '../actions/items';

class ItemList extends Component {
  componentDidMount() {
      //this.props.fetchData('http://599167402df2f40011e4929a.mockapi.io/items');
      this.props.fetchData('https://reqres.in/api/users');
  }

  render() {
      if (this.props.hasErrored) {
          return <p>Sorry! There was an error loading the items</p>;
      }

      if (this.props.isLoading) {
          return <p>Loading…</p>;
      }

      const items = this.props.items.data || [];
      console.log(items);

      return (
          <ul>
            {items.map((user, index) => (
                <li key={user.id}>
                    {user.first_name}
                </li>
            ))}
          </ul>
      );
  }
}

ItemList.propTypes = {
  fetchData: PropTypes.func.isRequired,
  items: PropTypes.object.isRequired,
  hasErrored: PropTypes.bool.isRequired,
  isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
  return {
      items: state.items,
      hasErrored: state.itemsHasErrored,
      isLoading: state.itemsIsLoading
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
      fetchData: (url) => dispatch(itemsFetchData(url))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ItemList);

当我看着我的控制台时，我看到了以下内容：

Array(0)
Array(0)
ItemList.js:22 
index.js:2178 Warning: Failed prop type: Invalid prop `items` of type `object` supplied to `ItemList`, expected `array`.
    in ItemList (created by Connect(ItemList))
    in Connect(ItemList) (at App.js:13)
    in div (at App.js:9)
    in App (at index.js:14)
    in Provider (at index.js:13)
__stack_frame_overlay_proxy_console__ @ index.js:2178
ItemList.js:22 
Array(3)

项目加载但很清楚我做错了什么。我的动作创作者：

export const itemsHasErrored = (bool) => ({type: 'ITEMS_HAS_ERRORED', hasErrored: bool})
export const itemsIsLoading = (bool) => ({type: 'ITEMS_IS_LOADING',isLoading: bool})
export const itemsFetchDataSuccess = (items) => ({type: 'ITEMS_FETCH_DATA_SUCCESS', items})


export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

Answer 1

更新了项目prop的PropTypes

//Original
items: PropTypes.object.isRequired,
//New
items: PropTypes.object.isRequired,

将项目缩减器的初始状态更改为对象

Answer 2

检查服务器或网络开发工具是什么项目，因为组件接收的项目来自哪里。

失败的道具类型错误但加载了项目

2 个答案: