React道具返回列表[Metronic主题]

Question

我有一个关于redux的问题，当我初始化页面时，返回一个特定于redux的道具列表。如果我console.log this.props.address (我正在获取的内容)，我将得到一个(4) [true, null, false, {…}]列表(最后一个项目最终是我所需要的)。

由于这个原因，我在访问实际Axios请求的内容时遇到了问题(尽管它始终是列表中的最后一项)。只有当我执行{this.props.address.slice(-1)[0].href}时，才能访问返回的JSON的一个项。我想这不是应该的，所以我肯定做错了什么。

我对Redux的反应很新鲜，因此我对使用Redux的不同方式并不熟悉。但是，当我使用来自createSlice的reduxjs/toolkit时，我已经将它缩减为初始状态下的一些事情(我以前从未使用过，但我正在使用的主题是它，所以我试图复制他们设置它的方式)。

我已经附上了下面的代码，并将感谢任何意见，引导我朝着正确的方向。我有更多的文件比这些-但我很肯定这三个文件将处理问题。

Research.js

import React from "react";
import { connect } from "react-redux";
import { fetchAddress } from "./_redux/addressActions";

class Research extends React.Component {
  componentDidMount() {
    this.props.fetchAddress(this.props.match.params.id);
  }

  render() {
    console.log(this.props.address);

    return <h1>{this.props.address.slice(-1)[0].href}</h1>;
  }
}

const mapStateToProps = (state) => {
  return {
    address: Object.values(state.address),
  };
};

export default connect(mapStateToProps, { fetchAddress })(Research);

addressSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialAddressState = {
  initialState: true,
};

export const callTypes = {
  list: "list",
  action: "action",
};

export const addressSlice = createSlice({
  name: "addresses",
  initialState: initialAddressState,
  reducers: {
    addressFetched: (state, action) => {
      state.actionsLoading = false;
      state.address = action.payload.address;
      state.error = null;
    },
  },
});

addressAction.js

import * as requestFromServer from "./addressCrud";
import { addressSlice, callTypes } from "./addressSlice";

const { actions } = addressSlice;

export const fetchAddress = (id) => (dispatch) => {
  if (!id) {
    return dispatch(actions.addressFetched({ address: undefined }));
  }

  dispatch(actions.startCall({ callType: callTypes.action }));
  return requestFromServer
    .getAddress(id)
    .then((response) => {
      const address = response.data;
      dispatch(actions.addressFetched({ address: address }));
    })
    .catch((error) => {
      error.clientMessage = "Can't find address";
      dispatch(actions.catchError({ error, callType: callTypes.action }));
    });
};

Answer 1

编辑的回答:根据下面的注释，似乎确实有一些内置于用actionsLoading和actions.startCall加载状态管理。

应该能够使用this.props.actionsLoading来避免呈现，并设置良好的默认值始终。

编辑的答案:变得更清晰。

我找不到处理应用程序加载状态的任何record工具包。如果您自己设置了这个加载状态，类似于他们在文档https://redux-toolkit.js.org/usage/usage-guide#asynchronous-logic-and-data-fetching上的情况，那该怎么办呢？

需要处理减速机的装载。

export const addressSlice = createSlice({
  name: "addresses",
  initialState: initialAddressState,
  reducers: {
    addressLoading: (state, action) => {
      state.loading = true;
    },
    addressFetched: (state, action) => {
      if(state.loading) {
        state.loading = false;
        state.address = action.payload.address;
        state.error = null;
      }
    },
  },
});

然后，确保分派事件以指示已启动加载。

dispatch(actions.addressLoading());
  return requestFromServer
    .getAddress(id)
    .then((response) => {
      const address = response.data;
      dispatch(actions.addressFetched({ address: address }));
    })

我也总是在初始状态中包含合理的缺省值。

const initialAddressState = {
  loading: false,
  error: null,
  address: null
};

最后一步是在加载或没有数据的情况下避免呈现。还有很多方法可以做到这一点。如果不看到应用程序的其余部分，很难知道您的最佳选择是什么。

render() {
  console.log(this.props.address);
  if(this.props.loading || this.props.address === null) return null;
  return <h1>{this.props.address.href}</h1>;
}

希望这更接近这个问题。

编辑回答:我最初误解了这个问题。

const mapStateToProps = (state) => {
  return {
    address: Object.values(state.address),
  };
};

这将在state.address对象之外创建一个值数组。因此，在这个例子中，一个类似于这样的对象：

const obj = { first: true, second: false };
const oops = Object.values(obj);

console.log(oops); // [true, false]

我不完全确定您希望如何显示您的数据，但是如果您想要address对象，那么使用address: state.address分配它。

原始答案:通常在JavaScript中，我们访问数组的最后一项，如下所示。您可以通过创建指向地址的局部变量来缩短它。

const address = this.props.address;
address[address.length - 1];

在您的示例中，您使用数组的最后一个元素(slice允许您从末尾返回到中间，带有负数)，并将其切片到自己的数组中。之后，将其作为新数组的第一个元素进行访问。

我认为，根据对所需内容的描述，进行最后一项访问是合理的。