时间戳

首页 > 解决方案 > TypeError: Object(...) is not a function React with Redux

reactjs - TypeError: Object(...) is not a function React with Redux

问题描述

我知道有很多类似的主题，但我无法解决我的问题。

我的 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;

这是我的容器：容器/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);

我要连接的操作：reducers/index.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",

我尝试按照 Github 上官方 redux 存储库的设置，但是是的，他们使用的是不同的 redux 版本：

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)

附加信息：

创建问题.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();

问题列表.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;

标签： reactjsredux

解决方案

您可以尝试使用mapDispatchToProps如下

const mapDispatchToProps = {
  addQuestion,
};

它必须自动将您的回调包装在调度中。

您也可以尝试在将addQuestion功能传递给mapDispatchToProps. 它是否有效？它打印什么？如果它是未定义的，那么你导入它是错误的。

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

推荐阅读