javascript - 移动的组件不做它的工作（react-redux）

问题描述

当我将组件移动到单独的文件时，它将无法工作。

我使用 redux 和 react
代码沙盒链接：https ://codesandbox.io/s/adoring-water-l35zj?fontsize=14&hidenavigation=1&theme=dark

此代码将起作用：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configStore from "./store/store";
import { addTodo } from "./store/store";

const App = () => {
  const [note, setNote] = useState("");
  const [error, setError] = useState(false);

  return (
    <div>
      <div>
        <input
          type={"text"}
          value={note}
          onChange={e => {
            setNote(e.target.value);
          }}
        />
        <button
          onClick={() => {
            if (note !== "") {
              store.dispatch(addTodo(note));
              setNote("");
              setError(false);
            } else {
              setError(true);
            }
          }}
        >
          SAVE
        </button>
        {error && <div>PLEASE ENTER A VALUE FOR TODO</div>}
        {store.getState().map(todo => {
          return <div key={todo.id}>{todo.note}</div>;
        })}
      </div>
    </div>
  );
};

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

但这不起作用:(index.js)

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configStore from "./store/store";
import AddTodo from "./components/AddTodo";

const App = () => {
  return (
    <div>
      <AddTodo />
      {store.getState().map(todo => {
        return <div key={todo.id}>{todo.note}</div>;
      })}
    </div>
  );
};

const store = configStore();

console.log(store.getState());

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

(AddTodo.js):

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../store/store";

const AddTodo = props => {
  const [note, setNote] = useState("");
  const [error, setError] = useState(false);

  return (
    <div>
      <input
        type={"text"}
        value={note}
        onChange={e => {
          setNote(e.target.value);
        }}
      />
      <button
        onClick={() => {
          if (note !== "") {
            props.addTodos(note);
            setNote("");
            setError(false);
          } else {
            setError(true);
          }
        }}
      >
        SAVE
      </button>
      {error && <div>PLEASE ENTER A VALUE FOR TODO</div>}
    </div>
  );
};

const mapDispatchToProps = dispatch => ({
  addTodos: note => dispatch(addTodo(note))
});

export default connect(
  undefined,
  mapDispatchToProps
)(AddTodo);

我不明白为什么这行不通。

我是 react 和 redux 的初学者。我真的很乐意帮助我，请回答

标签： javascriptreactjsreduxreact-redux

javascript - 移动的组件不做它的工作（react-redux）

问题描述

解决方案

推荐阅读