我面对这个问题已经两天了,现在我不知道如何获取数据.I CHECK=它正在显示对象的方案的类型.我使用了Object.key方法,但仍然收到相同的错误. 以下是我的数据 struct 的图像.这里只显示了两个,但可以更多,并且paymentData是一个array.请告诉我我该怎么做.

enter image description here

模式APISLY文件文件

export const schemeApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getSchemeOfUser: builder.query({
            query: () => ({
                url: `${SCHEME_API_URL}`,
                method: "GET",
                credentials: "include",
            }),
            keepUnusedDataFor: 5,
            providesTags: ["Schemes"],
        }),
        createScheme: builder.mutation({
            query: (data) => ({
                url: `${SCHEME_API_URL}/scheme_started`,
                method: "POST",
                body: data,
                credentials: "include",
            }),
            invalidatesTags: ["Schemes"],
        }),
    }),
});

export const { useGetSchemeOfUserQuery, useCreateSchemeMutation } = schemeApiSlice;

Dashboard.js

const { data } = useGetSchemeOfUserQuery();
<div className='container'>
                <SchemeData schemes={data?.schemes} />
            </div>

架构数据组件

const SchemeData = ({ schemes }) => {
    console.log(schemes);
    console.log(typeof schemes);

    console.log(typeof JSON.stringify(schemes));

    return (
        <div>
            <h5>Scheme List</h5>
            <ul>
                {Object.keys(schemes).map((item, i) => (
                    <li className='py-5' key={i}>
                        <span>{schemes[item]}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
};

推荐答案

代码的唯一重要问题是schemes是一个对象数组,并且代码试图直接呈现原始元素对象.

{Object.keys(schemes).map((item, i) => (
  <li className='py-5' key={i}>
    <span>{schemes[item]}</span> // <-- schemes[item] is object!
  </li>
))}

这在功能上等同于直接映射schemes数组(101 is just an array of the array indices):

{schemes.map((item, i) => (
  <li className='py-5' key={i}>
    <span>{item}</span> // <-- item is object!
  </li>
))}

因为item仍然是一个对象,所以你需要挑选出你想要实际渲染的属性.例如,item.useritem.wallet.

示例:

{schemes.map((item, i) => (
  <li className='py-5' key={i}>
    <div>User: {item.user}</div>
    <span>Wallet: {item.wallet}</span>
  </li>
))}

如果您希望呈现item.paymentData这又是另一个对象数组,则需要将每个数组元素映射到有效的JSX.例如,每月付款的列表.

<ul>
  {schemes.map((item) => (
    <li className='py-5' key={item._id}>
      <div>User: {item.user}</div>
      <span>Wallet: {item.wallet}</span>
      <ul>
        <p>Payments</p>
        {item.paymentData.map(({ amount, month_name }, i) => (
          <li key={i}>{month_name} - {amount}</li>
        ))}
      </ul>
    </li>
  ))}
</ul>

如果有时未定义schemesprops 值,则可以提供备用props 值:

const SchemeData = ({ schemes = [] }) => {
  return (
    <div>
      <h5>Scheme List</h5>
      <ul>
        ...
      </ul>
    </div>
  );
};

或将回退值传递到SchemeData:

<SchemeData schemes={data?.schemes ?? []} />

Reactjs相关问答推荐

NextJs Form不允许我输入任何输入,

在带有和设计的表格中禁用和取消选中复选框

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时,我希望控件仅显示该选项的文本部分

如何使数据库数据在第一次呈现时显示?

获取未捕获的错误:Gatsby生产版本上的最小化react 错误#418

如何从Reaction-Arborist树获取排序数据

是否为Reaction中未使用的组件生成Tailwincss样式?

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

错误:无法获取 RSC 负载.返回浏览器导航

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

从ReactDataGridtry 将数据传递给父组件

为什么刷新页面时我的localStorage PET值变成空字符串?

React Native map 中的初始zoom 级别

如何在react 中更新子组件中的变量?

在 redux 中分派到另一个减少时状态值不会改变

如何使图标适合 react-bootstrap 中的行元素

如何在props 更改时运行自定义挂钩?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行

点击提交后自动添加#