能够从 redux store 获取更新状态，但无法从接收器组件访问更新状态内的对象

Question

我正在使用 React 创建一个简单的图书列表应用程序并使用 Redux 管理状态。我只有 2 个处理状态的组件，输入组件分派操作和有效负载，而输出组件应该获取更新的状态数据。使用输出组件内的 useSelector() 挂钩，我可以看到状态已更新，但是，当我尝试访问对象数组和长度属性时，我得到 'cannot read properties of undefined'。请让我知道我错过了什么。

这是我的输入组件代码

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import styles from "./Input.module.css";

const Input = () => {
  const dispatch = useDispatch();

  const [bookObject, setBookObject] = useState({
    bookName: "",
    authorName: "",
  });

  const inputChangeHandler = (e) => {
    if (e.target.id === "bookName" || e.target.id === "authorName") {
      setBookObject({
        bookName: document.getElementById("bookName").value,
        authorName: document.getElementById("authorName").value,
      });
    }
  };

  const submitHandler = (e) => {
    if (bookObject.bookName !== "" && bookObject.authorName !== "") {
      dispatch({
        type: "GET_INPUT",
        payload: {
          name: bookObject.bookName,
          author: bookObject.authorName,
          id: Math.random(),
        },
      });
      setBookObject({ bookName: "", authorName: "" });
    } else {
      alert("Enter valid Details");
    }
    e.preventDefault();
  };

  return (
    <form className={styles.form} onSubmit={submitHandler}>
      <div>
        <label>Book's Name</label>
        <input
          id="bookName"
          type="text"
          placeholder="Enter the book's name"
          onChange={inputChangeHandler}
          value={bookObject.bookName}
        />
      </div>
      <div>
        <label>Author's Name</label>
        <input
          id="authorName"
          type="text"
          placeholder="Enter the Author's name"
          onChange={inputChangeHandler}
          value={bookObject.authorName}
        />
      </div>
      <button>Submit</button>
    </form>
  );
};

export default Input;

这是输出组件的代码

import React, { Fragment } from "react";
import styles from "./Output.module.css";
import { useSelector } from "react-redux";

const Output = () => {
  
  const outputState = useSelector((state) => state);
  const length = outputState.length
  const outputObj = outputState.outputObj

  return (
    <Fragment>
      {length !== undefined ? (
        <div className={styles.div}>
          <h4>Book List</h4>
          <ul>
            {outputObj.map((book) => (
              <li key={book.id}>
                {book.name}, written by {book.author}
              </li>
            ))}
          </ul>
        </div>
      ) : (
        <h4>The Book List is empty</h4>
      )}
    </Fragment>
  );
};

当我在控制台记录 outputState 时，我得到了一个带有 outputObj 数组和长度属性的正确对象，但是当我尝试访问 outputState.outputObj 或 outputState.length 时，我得到了提到的错误。我也尝试过分别使用两个 useSelectors 来获取数据，但没有成功。

这里是reducer的代码

import { createStore } from "redux";

const defaultState = {
  outputObj: [],
  length: undefined,
};

const bookListReducer = (state = defaultState, action) => {
  if (action.type === "GET_INPUT") {
    state.outputObj = [...state.outputObj, action.payload];
    return {
      outputObj: state.outputObj,
      length: state.outputObj.length,
    };
  }
};

const store = createStore(bookListReducer);

export default store;

Answer 1

如果没有动作，或者你的动作类型不是“GET_INPUT”你的减速器将return未定义，因此状态将被刷新。按如下方式更新您的代码。

const bookListReducer = (state = defaultState, action) => {
  if (action.type === "GET_INPUT") {
    state.outputObj = [...state.outputObj, action.payload];
    return {
      outputObj: state.outputObj,
      length: state.outputObj.length,
    };
  }

  return state; // <- HERE
};

能够从 redux store 获取更新状态，但无法从接收器组件访问更新状态内的对象

Able to get the updated state from redux store but not able to access the objects inside the updated state from the receiver component

javascript

reactjs

redux