Question

我已成功将redux集成到我的应用程序中。我正在从发送到数据库的表单中获取数据，并使用eventListener（redux-saga）将数据更新到我的商店中。

使用Redux DevTools，我在商店中看到了数据，但是我的组件未显示数据。我正在使用react-redux中的useSelector钩子。

我的组件

export const DisplayUser = () => {
  const { db } = useSelector(state => state.data.db);
  var count = 0;
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Age</th>
          <th>Birthday</th>
          <th>Hobby</th>
        </tr>
      </thead>
      <tbody>
        {db ? (
          db.map(data => {
            return (
              <tr key={count++}>
                <td>{data.fname}</td>
                <td>{data.lname}</td>
                <td>{data.email}</td>
                <td>{data.age}</td>
                <td>{data.birth}</td>
                <td>{data.hobby}</td>
              </tr>
            );
          })
        ) : (
          <p>Please fill the form</p>
        )}
      </tbody>
    </Table>
  );
};

这是我的应用程序的屏幕截图。

这是我的redux商店的屏幕截图，其中包含最近提交的输入：

这是我的减速器的代码：

import {
  SAVE_FORM,
  UPDATE_STORE
} from "../actions/types";

const initialState = {
  sent: [],
  db: ""
};

export default function (state = initialState, action) {
  switch (action.type) {
    case SAVE_FORM:
      return {
        ...state,
        sent: [action.payload]
      };
    case UPDATE_STORE:
      return {
        db: [action.payload]
      };
    default:
      return state;
  }
}

Answer 1

您不需要根据选择器的结果来分解db。您已经选择了db键。将选择器更新为：

const db = useSelector(state => state.data.db);

你应该很好。

如何使用Redux存储中的数据更新组件

1 个答案: