英文:
Uncaught runtime errors : Objects are not valid as a React child
问题
我已经理解您的要求，以下是您提供的文本的翻译：
我面临了这个问题已经有两天了，我不知道如何获取数据。我检查了它的类型是 scheme，它显示为对象。我使用了 Object.keys 方法，但仍然得到相同的错误。
这是我的数据结构的图片。这里只显示了两个，但可能会有更多，paymentData 是一个数组。请告诉我如何做到这一点。
[schemeAPIslice 文件]
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>
[schemedata 组件]
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>
);
};
<details>
<summary>英文:</summary>
I am facing this issue for 2 days now I cant't get it how to can fetch the data. I check= the type of it is scheme it is showing object. I used Object.keys method but still geting the same error.
here is image of my data structure. Here is only showing two but can be more and the paymentData is an array. Please tell me how can i do this.
[![enter image description here][1]][1]
schemeAPIslice file
-------------------
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>
schemedata component
--------------------
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>
);
};
[1]: https://i.stack.imgur.com/WOGFy.png
</details>
# 答案1
**得分**: 1
The only significant issue with the code is that `schemes` is an array of objects and the code is trying to render the raw element objects directly.
这段代码唯一的重要问题是`schemes`是一个对象数组，代码试图直接渲染原始元素对象。
This is functionally equivalent to mapping the `schemes` array directly (`Object.keys(schemes)` is just an array of the array indices):
这在功能上等同于直接映射`schemes`数组（`Object.keys(schemes)`只是一个数组的索引数组）：
Since `item` is still an object you will need to pick out the properties you want to actually render. For example, `item.user` or `item.wallet`.
因为`item`仍然是一个对象，所以你需要选择要实际渲染的属性。例如，`item.user`或`item.wallet`。
If you are wanting to render the `item.paymentData` this is yet again another array of objects, each array element needs to be mapped to valid JSX. For example, a list of monthly payments.
如果你想渲染`item.paymentData`，那么这又是另一个对象数组，需要将每个数组元素映射到有效的JSX。例如，一个月度支付列表。
If the `schemes` prop value is sometimes undefined then you can either provide a fallback prop value:
如果`schemes`属性值有时是未定义的，那么你可以提供一个备用的属性值：
Or pass a fallback value to `SchemeData`:
或者将一个备用值传递给`SchemeData`：
<details>
<summary>英文:</summary>
The only significant issue with the code is that `schemes` is an array of objects and the code is trying to render the raw element objects directly.
```jsx
{Object.keys(schemes).map((item, i) => (
<li className='py-5' key={i}>
<span>{schemes[item]}</span> // <-- schemes[item] is object!
</li>
))}
This is functionally equivalent to mapping the schemes array directly (Object.keys(schemes) 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>
))}
Since item is still an object you will need to pick out the properties you want to actually render. For example, item.user or item.wallet.
Example:
{schemes.map((item, i) => (
<li className='py-5' key={i}>
<div>User: {item.user}</div>
<span>Wallet: {item.wallet}</span>
</li>
))}
If you are wanting to render the item.paymentData this is yet again another array of objects, each array element needs to be mapped to valid JSX. For example, a list of monthly payments.
<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>
If the schemes prop value is sometimes undefined then you can either provide a fallback prop value:
const SchemeData = ({ schemes = [] }) => {
return (
<div>
<h5>Scheme List</h5>
<ul>
...
</ul>
</div>
);
};
Or pass a fallback value to SchemeData:
<SchemeData schemes={data?.schemes ?? []} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论