Question

我正在尝试使用Redux构建我的React应用，但遇到此错误，错误：this.props.items.map不是在代码中显示的使用API与Redux一起使用React的功能。

 render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <Route exact path="/" render={props => (
              <React.Fragment>
                <Todos 
                />
              </React.Fragment>
            )} />
            <Route path="/about" component={About} />
          </div>
        </div>
      </Router>

import axios from "axios";

export const getItems = () => {
  axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
    .then(res => dispatch({
      type: 'GET_ITEMS',
      payload: res.data
    }))
}

const initialState = { items: {} };

export default function (state = initialState, action) {
  switch (action.type) {
    case 'GET_ITEMS': return {
      ...state,
      items: action.payload
    };   
    default: return state
  }
}

class Todos extends Component {
  render() {
    return (
      (this.props.items.map)((todo) => (
        <React.Fragment>
          {todo.title}
        </React.Fragment>
      ))

   )
  }
}

const mapStateToProps = state => ({
  items: state.items
})

export default connect(mapStateToProps)(Todos);

我正在尝试在我的Todo组件中显示获取的api数据，以上是代码。我收到上述错误。

Answer 1

items的初始状态是一个对象，但可能应该是一个数组。只有数组具有map()函数。

const initialState = { items: [] };

this.props.items.map不是与redux一起使用反应来获取api的函数

1 个答案: