Question

使用Redux时出现此错误：

“未捕获的TypeError：无法读取未定义的属性'props'”

当我在项目中不使用fetch方法时，一切正常。然后，我将从另一个站点获取数据（注释）添加到项目中，并且一切都停止了工作

我的减速器：

 export function itemsHasErrored(state = false, action) {
  if (action.type === 'ITEMS_HAS_ERRORED') {
    return action.hasErrored;
  } else {
    return state;
  }
}

export function itemsIsLoading(state = false, action) {
  if (action.type === 'ITEMS_IS_LOADING') {
    return action.isLoading;
  } else {
    return state;
  }
}

export function getNotesReducer(state = [], action) {
  if (action.type === 'ITEMS_FETCH_DATA_SUCCESS') {
    return action.notes;
  } else {
    return state;
  }
}

我的动作：

export function itemsHasErrored(bool) {
  return {
    type: 'ITEMS_HAS_ERRORED',
    hasErrored: bool,
  }
}

export function itemsIsLoading(bool) {
  return {
    type: 'ITEMS_IS_LOADING',
    isLoading: bool,
  }
}

export function itemsFetchDataSuccess(notes) {
  return {
    type: 'ITEMS_FETCH_DATA_SUCCESS',
    notes,
  }
}

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((notes) => dispatch(itemsFetchDataSuccess(notes)))
        .catch(() => dispatch(itemsHasErrored(true)));
  };
}

我的商店：

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers/rootReducer";

export default function configureStore(initialState) {
  return createStore(
      rootReducer,
      initialState,
      applyMiddleware(thunk),
  )
}

我使用商店的组件：

import React, {Component} from "react";
import NoteCard from "../components/NoteCard";
import "../styles/notes-container.scss";
import { connect } from "react-redux";
import { itemsFetchData } from "../actions/getNotes";
import 'react-uuid'

class NotesContainer extends Component {
  componentDidMount() {
    this.props.fetchData('http://private-9aad-note10.apiary-mock.com/notes');
    console.log('NotesContainer mounted');
  }


  render() {
    function renderCards() {
      return this.props.notes.map(note => {
        return (
            <NoteCard
                id={note.id}
                name={note.title}
            />
        );
      });
    }

    return (
        <div className="notes-container">{renderCards()}</div>
    )
  }
}

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

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

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

Answer 1

您给出的错误实际上与redux无关。这是因为您的函数没有正确的this上下文。

function renderCards() {
      return this.props.notes.map(note => {

简单的解决方法是使其具有箭头功能

const renderCards = () => {
      return this.props.notes.map(note => {

关于原因，有很多很好的解释。 Here's one that goes into great detail。

Answer 2

没有任何堆栈跟踪，这是我看到潜在问题的地方：

render() {
    function renderCards() {
      // `this` is now your `renderCards` function and not your component, thus `this.props` doesn't work.
      return this.props.notes.map(note => {
        return (
            <NoteCard
                id={note.id}
                name={note.title}
            />
        );
      });
    }

    return (
        <div className="notes-container">{renderCards()}</div>
    )
  }

您可以尝试将renderCards()从render（）移出：

renderCards() {
  return this.props.notes.map(note => (
    <NoteCard
      id={note.id}
      name={note.title}
    />
  ));
}

render() {
  return (
    <div className="notes-container">{this.renderCards()}</div>
  );
}

Redux：无法使用商店

2 个答案: