TypeError: Object (...) не является функцией React with Redux

Question

Я знаю, что существует множество похожих тем, но мне не удалось решить мою проблему.

Я получаю эту ошибку для моей mapDispatchToProps:

TypeError: Object (. ..) не является функцией

Это мой компонент: component / AddQuestions. js:

import React from "react";
import QuestionList from "./QuestionList";
import PropTypes from "prop-types";

const AddQuestions2 = ({ questions, addQuestion }) => {
  let newQuestion;

  function handleAdd(e) {
    e.preventDefault();
    console.log(newQuestion);
    addQuestion(newQuestion);
  }

  function handleChange(e) {
    newQuestion = e.target.value;
  }

  return (
    <div>
      <h2>Questions</h2>
      <QuestionList questions={questions} />
      <form onSubmit={handleAdd}>
        <label htmlFor="new-question">Enter new Question:</label>
        <input id="new-question" onChange={handleChange} value={newQuestion} />
        <button>Add Question #</button>
      </form>
    </div>
  );
};

AddQuestions2.propTypes = {
  questions: PropTypes.array.isRequired,
  addQuestion: PropTypes.func.isRequired
};

export default AddQuestions2;

Это мой контейнер: container / AddQuestions. js :

import { connect } from "react-redux";
import AddQuestion from "../components/AddQuestions";
import { addQuestion } from "../redux/actions";

const mapStateToProps = state => ({
  questions: ["test1", "test2"]
});

const mapDispatchToProps = dispatch => ({
  addQuestion: question => dispatch(addQuestion(question))
});

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

Действие, которое я хочу подключить: редукторы / индекс. js:

export const addQuestion = question => ({
    type: "ADD_QUESTION",
    question
})

Я использую следующие версии:

"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-scripts": "3.4.0",
"redux-thunk": "^2.3.0",
"redux": "^4.0.5",

I попытался выполнить настройку официального репо-редукса на Github, но да, они используют другую версию редукса:

https://github.com/reduxjs/redux/tree/master/examples/todos/

Сообщение об ошибке в консоли:

react-dom.development.js:327 Uncaught TypeError: Object(...) is not a function
    at addQuestion (AddQuestions.js:10)
    at handleAdd (AddQuestions.jsx:53)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Дополнительная информация:

CreateQuestion. js:

import React from "react";
import AddDetails from "./AddDetails";
import AddQuestion from "../containers/AddQuestions";
import QuestionList from "./QuestionList";

class CreateQuestion extends React.Component {
  render() {
    return (
      <div>
        <AddDetails />
        <AddQuestion />
      </div>
    );
  }
}

export default CreateQuestion;

Приложение. js:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import CreateQuestion from "./components/CreateQuestion";

function App() {
  return <CreateQuestion />;
}

export default App;

index. js:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configureStore from "./redux/configureStore";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const store = configureStore();

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

serviceWorker.unregister();

QuestionList.jsx

import React from "react";

class QuestionList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.questions.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

export default QuestionList;

Answer 1

Вы можете попытаться использовать mapDispatchToProps, как показано ниже

const mapDispatchToProps = {
  addQuestion,
};

Он должен автоматически переадресовывать ваш обратный вызов при отправке.

Также вы можете попытаться зарегистрировать вашу addQuestion функцию до передать его на mapDispatchToProps. Это работает или нет? Что это печатает? Если он не определен, значит, вы импортировали его неправильно.

import { addQuestion } from "../redux/actions";
console.log(addQuestion); // undefined?