在功能组件中解决“对象作为React子级无效(found：[object Promise])”
在React中，当将一个对象作为子级传递给组件时，可能会遇到"对象作为React子级无效(found：[object Promise])"的错误。这个错误通常发生在使用异步操作或Promise时。
这个错误的原因是React要求子级必须是一个React元素，而不是一个对象或Promise。为了解决这个问题，可以采取以下几种方法：
- 确保将对象转换为React元素：可以使用React.createElement()方法将对象转换为React元素，然后将其作为子级传递给组件。例如：
const childElement = React.createElement('div', { key: 'child' }, 'Child Component');
const parentElement = React.createElement(ParentComponent, null, childElement);- 使用条件渲染：可以在父组件中使用条件渲染来处理异步操作或Promise。在异步操作完成之前，可以渲染一个加载中的状态，然后在异步操作完成后再渲染子组件。例如：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
isLoading: true
};
}
componentDidMount() {
fetchData().then(data => {
this.setState({ data, isLoading: false });
});
}
render() {
const { data, isLoading } = this.state;
if (isLoading) {
return <div>Loading...</div>;
}
return <ChildComponent data={data} />;
}
}- 使用React的生命周期方法：可以在父组件的生命周期方法中处理异步操作或Promise，并在异步操作完成后再渲染子组件。例如：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
fetchData().then(data => {
this.setState({ data });
});
}
componentDidUpdate() {
const { data } = this.state;
if (data) {
this.renderChildComponent();
}
}
renderChildComponent() {
const { data } = this.state;
return <ChildComponent data={data} />;
}
render() {
return null;
}
}以上是解决"对象作为React子级无效(found：[object Promise])"错误的几种方法。根据具体情况选择适合的方法来处理异步操作或Promise，并确保将对象转换为React元素或在适当的时机渲染子组件。
相关·内容
我正在使用firebase开发一个react应用程序。当我试图从数据库中检索我的消息时，我得到了以下错误 对象作为React子级无效，如果要呈现子级集合，请改用数组。 我的代码 const [channels, setChannels] = useState([]);
useEffect(() => {
db.collection('channels').onSnapshot((snapshot) =>
setChannels(
snapshot.docs.map((doc) => ({
浏览 14提问于2021-02-08得票数 1
我在Nextjs中使用动态路由，但我希望在进行服务器端渲染之前获取客户端的IP，以便为社交媒体共享添加头。 下面是我的代码： function myIP() {
const router = useRouter()
const { id } = router.query; // Destructuring our router object
return returnIP()
.then((ip) => {
console.log("It an IP -- " + ip);
浏览 26提问于2020-09-14得票数 1
回答已采纳
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
3回答
在下面的场景中，我需要为数组中的每一项向端点发出ajax请求，同时在其上进行映射并在屏幕上显示它。
const items = [
{
id: 1,
name: "test"
},
{
id: 2,
name: "test2"
}
]
在我的render()方法中：
render() {
return (
items.map((item) => {
<div>{item.name}</div>
浏览 0提问于2018-11-23得票数 0
我是React Native的新手，不太了解对象的初始状态和当我有多个属性要设置时更新状态的概念。
错误(编辑#2)：
Objects are not valid as a React child (found: object with keys {userRole}). If you meant to render a collection of children, use an array instead.
App.js
const initialLoginState = {
userRole: null,
userId: null,
};
const [user, se
浏览 2提问于2021-02-14得票数 0
我在控制台中收到了带有实际坐标x，y的dataAddress。但我有一个问题:对象作为React子级无效(found: object Promise)。我真的不明白哪里出了问题。 const BlogPage = () => {
const data = useStaticQuery(graphql`
query{
allContentfulBlogPost{
edges{
node{
location{lat, lon}
}
}
}
}
`)
const t
浏览 8提问于2020-08-07得票数 0
我在使用react.js查询graphql端点时遇到了问题。这是有问题的代码。 class ChecklistSummaryTime extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
sitePath: window.location.pathname
}
}
render() {
return(
<ApolloProvider client={getGraphqlClient()}>
浏览 5提问于2019-03-01得票数 0
回答已采纳
1回答
我希望根据从api接收到的有效负载呈现一个组件，如下所示
<Route path="/foo/bar" render={() => {
return (get('/some/api').then((res) => {
return <Baz data={res.data} />
}).catch((err) => console.log))
}} />
但是我得到了一个错误：
Objects are not valid as a React child (found: [o
浏览 1提问于2017-12-19得票数 8
回答已采纳
我有两个类，应用程序和qrCode。qrCode类根据classes状态中提供的地址返回qrcode的图像。app类显示qrcode组件。在getSessionID方法中，应用程序向服务器发出请求，然后应该调用updateQrCode来更新所显示的qrcode。 如何从App.js调用方法updateQrCode？我不能实例化一个新的QrCode，因为它不是正在显示的实例。 App.js： import React, { Component } from "react";
import "./App.css";
import QrCode from "
浏览 18提问于2021-06-13得票数 0
回答已采纳
假设我们有一个名为MyChildComponent的组件，它将用于显示数字列表，还可以通过在MyChildComponent中单击按钮将随机数字添加到列表中。单击按钮时，只有MyChildComponent会重新渲染，因为只有MyChildComponent的状态会更新。 public class MyParentComponent extends React.Component {
const numsInParent = [0,1,2];
render() {
return <MyChildComponent nums="numsInPare
浏览 27提问于2021-02-12得票数 3
回答已采纳
1回答
我是TypeScript的新手，遇到了一段让我困惑不已的代码。我试图理解componentControl在下面所做的功能，但我认为我没有完全理解它。
componentControl:
const componentControl: <P extends object>(
options: BaseProps<P>
) => React.FunctionComponent<P> = <P extends object>(options: BaseProps<P>) => {
const defaultBasePro
浏览 1提问于2022-06-19得票数 3
我是新的测试，我创建了一个反应应用程序通过创建-反应-应用程序，我只是尝试运行一个测试。
我的测试就这么简单
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '../containers';
it('renders without crashing', () => {
const div = document.createElement('div');
expect(3).toBe(3)
浏览 1提问于2019-05-23得票数 2
1回答
我不是在上课，我想学习如何手动操作。我正在处理登录屏幕。如果你想给我看你的代码，你需要保存和共享链接。所以我想要一个用于显示textbox的函数组件(假设ChildComponent是函数名，所以是export ChildComponent)。
因此，在“家长/屏幕1”中，我有类似的东西，对吗？
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'exp
浏览 4提问于2021-02-14得票数 2
回答已采纳
我有父组件，我在那里进行API调用，并为一个对象设置状态。然后我将这个状态作为道具传递给孩子。这是我的父母代码，
class Header extends React.Component {
constructor(props) {
super(props);
this.state = { user: null};
}//end of constructor
componentWillMount() {
getUserData(url).then((result) =>{
this.setState({user : result})
浏览 1提问于2016-11-14得票数 0
2回答
通过，我了解了React自动维护子组件的状态，这就是为什么
不应该在州里去什么？
React ：基于底层支持和状态在render()中构建它们。
现在，我的问题是如何对我们正在隐藏的组件做同样的操作？
考虑一个子组件，它在迭代中不会被显示，同时我们希望保留它的状态，以便将来它将被带回！
为了说明我的确切意思，我设计了一个案例场景来向您展示。在下面的代码中，您可以添加有状态子组件。为每个组件提供了一个复选框，这样您就可以标记它们。最后，第三个按钮将隐藏未被标记的子组件。我正在寻找一种方法来恢复未标记的组件的状态，一旦它们被带回来。
class BlackBox extends Reac
浏览 6提问于2016-05-24得票数 3
回答已采纳
我正在尝试使用promise tracker。我用的是react-promise-tracker包。
下面是我的组件代码：
import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import Spinner from "./Spinner";
const LdngIndicator = (props) => {
const { promiseInProgress } = usePromiseTracker();
r
浏览 0提问于2020-12-11得票数 0
新来的。
我一直在寻找答案，和。
我也在使用Redux。根据良好实践，我有一个容器"AddressContainer“及其组件"Address”。
AddressContainer的内容如下-
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Field, change } from 'redux-form'
import { Col,
浏览 3提问于2017-06-10得票数 0
回答已采纳
请告诉我为什么我会从这个应用程序中得到这个错误：
index.js：
const API='http://my-domain.com/api/?format=json'
class App extends React.Component{
constructor(props){
super(props);
this.state={
data: [],
isLoading: false,
error: null,
};
}
componentDidMount(){
this.setState({isLoading: true});
浏览 90提问于2018-07-18得票数 0
回答已采纳
我的react-bootstrap-typeahead设置如下： // MusicServices.jsx
import React, {Fragment, useState} from 'react';
import { Form } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
const MusicServices = ({services}) => {
const [musicServiceID, setMusic
浏览 20提问于2020-08-28得票数 1
回答已采纳
1回答
我想用php Symfony调用一条反应路线。
首先，我创建了一个功能路径，其反应如下：
import addNotification from 'react-push-notification';
const Notifications = () => {
return (
addNotification({
title: 'Notification',
subtitle: 'Welcome',
message: 'New messa
浏览 2提问于2021-05-03得票数 0
回答已采纳
4回答
我将一个布尔值从父组件传递给子组件，它工作得很好。在子组件中，尝试将该布尔值存储到一个变量中，以定义if条件。它不起作用。 import React, { Component } from 'react';
import data from "./data/data";
function NavElements(props) {
//const isEditMode = false; //When the value is static it is working fine.
const isEditMode = {this.props.data}; //
浏览 36提问于2020-01-01得票数 0
我想(现在)从promise中检索一个字段，并将其呈现为弹出模式中的标题。我得到了使用useEffect解决的承诺，它确实填充了我的模式，但是它在等待响应设置值时会有一点延迟。 我试着在同一个文件中的Modal下面创建另一个函数来使用aync/await，但是我在弄清楚把它们放在哪里时遇到了麻烦，因为我总是因为错误地使用它而得到错误，或者promise中的任何东西都没有被返回。 import React, { useState, useEffect } from 'react';
import './Modal.css';
const Modal = ({
浏览 42提问于2020-04-16得票数 0
回答已采纳
我读过的所有关于promises的文章都显示了console.log的示例-我正在使用AWS Athena，并希望在我的React导出的网页上显示结果。react导出不允许使用.then。所以我需要将promise解析为一个外部变量。 客户端是一个aws雅典娜客户端，它返回一个我需要解析的承诺。 async function getResult(){
try {
return await client.send(command);
} catch (error) {
return error.message;
}
}
export default getResult
浏览 23提问于2021-10-14得票数 1
回答已采纳
我正在创建一个React应用程序，其中有一个名为FirebaseManager的类。登录Google后，我们从Firebase检索一个对象，其中包含我们需要的用户的所有信息。我希望将此信息存储在User类的一个对象中，以便在UI中本地提供它。为此，我在FirebaseManager中创建了一个属性currentUser，在其中我初始化了User的一个空对象，然后用updateUser方法更新它。下面是它们的代码：
// Current logged in user
currentUser = new User();
// Update user
updateUser(user,
浏览 0提问于2020-05-03得票数 0
整个错误：
不变量冲突:对象作为React子对象无效(找到:带有键{$$typeof、type、key、ref、props、_owner、_store}的对象)。如果您打算呈现一个子集合，则使用一个数组，或者使用createF.‘包装对象。
我找不到这个错误的确切位置，它只是在react dom中产生了一个错误，那么我如何调试和发现这个错误呢？
浏览 2提问于2017-09-12得票数 1
1回答
我正在使用react useContext钩子并试图更新它的值。
背景如下：
import React from 'react';
const TokenContext = React.createContext({
token: null,
setToken: () => {}
});
export default TokenContext;
和NotFound.js
import React, { useContext, useEffect } from 'react';
import TokenContext from '
浏览 2提问于2020-06-09得票数 1
回答已采纳
1回答
新手问题:构建购物车，我在模式中有一个表单。
submit按钮是模式的按钮(在form标记之外)，但似乎是将表单发送到handleOnSubmit处理程序。但是，除了关闭模式之外，我无法更新productBought和productName状态值。
理想情况下，我希望将basket[]内容(来自InputList类)推送到父类(AsyncAwaitLocalhost)中的一个新数组中，之后我可以将整个购买提交给一个API。
refs已被弃用，各种其他类型的共享数据也让我失望。我面临的挑战是：
(i)如何将篮子对象的推送共享给等待的父状态对象？以及(ii)在控制台记录表单对象后，如何提交表单？
浏览 4提问于2021-07-08得票数 0
1回答
我在试着建立一个天气应用程序。我有一个搜索栏组件，它通过api获取数据，并设置天气道具的状态(最初为null)：
getInitialState: function() {
return {text: '', weather: null};
},
handleClick: function() {
WeatherApi.get('q=' + this.state.text).then(function(data) {
this.setState({weather: data})
}.bind(this));
}
浏览 2提问于2016-07-19得票数 0
回答已采纳
问题是：
如何获得引用(作为ReactElement而不是DOM)，在一个节点中，带有螺旋桨引用.
示例，在下面
将类MyTable呈现为：
<table ref="myTable">
{this.state.list.map(name=>
<AddVarTableRow key={name} myName={name}/>
)}
</table>
在componentDidUpdate，想要这样做：
React.Children.forEach(this.refs.tbody.props.ch
浏览 0提问于2016-03-11得票数 0
当我使用PrivateRoute时，DOM呈现的是<children history="[object Object]" location="[object Object]" match="[object Object]"></children>而不是在AppRouter中传递的<AdminLayout/>。
不知道我哪里出了问题。
来自未定义的PrivateRoute**：子级的错误**
这是：
Error: Element type is invalid: expected a string (for
浏览 5提问于2020-09-11得票数 0
回答已采纳
3回答
我有一个应用程序，主要是用类基react组件编写的，但是我们正在用Stripe实现付费墙功能。
问题是条带使用钩子，它不适用于类基组件。是否可以将子类基组件放入父函数基组件以实现此目的。在不将每个组件重写为函数基组件的情况下，我将如何做到这一点。
每次尝试包含带有类基子元素的函数基组件时，都会产生以下错误：
错误:无效钩子调用。钩子只能在函数组件的主体内调用。
是否有任何的工作，或者我应该重写所有的组件作为功能组件？
一个快速示例，使用react router作为查询参数，然后将这些参数传递到类基子组件中。
function useQuery() {
return new URLSea
浏览 1提问于2020-12-04得票数 0
回答已采纳
您能告诉我，如何将state值从子组件child复制到Parent parent吗？子组件实现按钮上状态的递增和递减。该值也应显示在Parent中。谢谢! import React, {useState} from 'react';
import Child from "./Child";
const Parent = () => {
const [value, setValue] = useState(0);
return (
<>
<span>{value}</s
浏览 29提问于2021-08-21得票数 0
当我使用fetch I react时，我得到这样的错误:错误:对象作为React子对象无效(found: object with keys {results，info})‘
这是我的代码
import React from "react";
import "./App.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: [],
IsLoding: false,
};
}
浏览 0提问于2020-07-13得票数 2
让我们假设以下简单的场景：
我们有两个屏幕，A和B。我们从屏幕A导航到屏幕B。React导航发出用于B的willFocus事件
class B extends React.Component (
componentDidMount(){
fetchServerData() // fetches some data
}
render(){
<View>
<NavigationEvents
onWillFocus={someFunc}
/>
</Vi
浏览 1提问于2020-01-23得票数 3
1回答
我有一段代码：
const defaultValue = new Api()
const ApiContext = React.createContext(defaultValue);
const ApiProvider = ApiContext.Provider;
const ApiConsumer = ApiContext.Consumer;
const withApi = (Enhanced: any) => {
return (
<ApiConsumer>
{api => {
浏览 0提问于2019-03-21得票数 3
回答已采纳
我是新来的。
我需要改变点击按钮的整个视图。
为此，我需要从子组件中更新父组件的状态。
就像我们做的会话变量一样。你们知道吗那就帮帮我吧。
提前谢谢。
这是我的密码：
App.jsx
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
let RedirectTo = this.state.page;
let RenderPage;
switch (RedirectTo) {
case 'component':
浏览 6提问于2017-05-03得票数 0
回答已采纳
我正在尝试使用jest编写测试，我遇到了这个错误 Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
in td (created by TableCell)
in TableCell (created by DataTable)
in tr (created by TableExpandRow)
in Tab
浏览 13提问于2020-07-09得票数 0
回答已采纳
3回答
我不能在React中打印简单的JavaScript日期。
import React, { Component } from 'react';
import './ActivityWarningText.css';
class ActivityWarningText extends Component {
render() {
const str = new Date();
return(
<div>
<h1>All activi
浏览 0提问于2018-04-25得票数 2
回答已采纳
我是React Native的新用户，我正在尝试使用React Native将一些Swift代码移植到Javascript。
在Swift中，我有一个类，负责实例化几个对象和一个viewController，并将所有对象互连起来，并将它们的引用设置为viewController。
这是一个基本的版本：
class A
{
func instantiateView()
{
let window = UIApplication.sharedApplication().windows[0] as! UIWindow;
let viewController = // Insta
浏览 2提问于2015-06-22得票数 0
2回答
我的问题如下：
我有一个异步函数，它发出一个mysql请求，并根据请求的结果返回一个不同的DIV。
const GetData = async (idAluno, disciplina) => {
variavel = await confereInicial(idAluno, disciplina.id);
//console.log(variavel); imprime direitinho, sem problemas
if (variavel.data.length === 0) {
return (
<DivCheckBox
浏览 0提问于2021-05-27得票数 1
我想创建可重用的路由组件
import React from 'react';
import { Route } from 'react-router-dom';
interface ITProffesion {
proffesion: string;
}
export const ITRoleRouter: React.FC<ITProffesion> = ({ proffesion }) => (
<Route exact path={`/${proffesion}`} key={proffesion}>
&
浏览 0提问于2021-01-28得票数 1
2回答
嗨，我正在努力学习如何使用与API响应反应。我有一个JSON端点，它返回关于GraphQL中产品的信息。我想循环处理响应，并为每个产品呈现一个react组件，只需显示产品名称。
JSON响应如下所示：
{
"data": {
"products": [
{
"productName": "Pepsi",
"price": "1.99",
},
{
"productName": "C
浏览 3提问于2021-10-30得票数 0
回答已采纳
我有一个基于类的React组件。这是一个子组件，状态来自另一个父组件。这是JSX，它在一个map函数中。在map函数中，有一个很大的JSX代码，但我只放了相关的部分。 {platformsList.map((item, index) => (
{item.platform_id ? (
<div>
{this.getSelectedProfiles(item.platform_id)}
</div>)) : ''} 对应的函数写在render方法的上方。这里的响应是一个对象： getSelectedProfiles = async(id)
浏览 34提问于2020-06-19得票数 0
我使用react路由器v4，我想通过编程导航到其他url (我经常在我的商店需要这个)。在react路由器v3中，这是非常简单的:您只需要使用browserHistory.push()。但这一次很复杂。我不能像那样从任何反应组件中使用。所以，我试着从上下文中获取路由器。这是我的部件
'use strict';
import React, { Component } from 'react';
import { observer, Provider } from 'mobx-react';
import { BrowserRouter, Match
浏览 4提问于2017-01-04得票数 0
回答已采纳
1回答
我试图获取React中的嵌套值，但我得到了一个错误。
我已经将React组件分成了要循环的几个部分，但我认为问题是试图循环对象和数组。
const TableRow = value => (
<tr>
<td>${value}</td>
</tr>
);
const TableBody = ({ day }) => (
<tbody>
<tr>
<td>{day}</td>
</tr>
{ /* Repeats for
浏览 0提问于2017-06-19得票数 0
2回答
我在代码中使用了2 useState。当第二次useSate状态为真时，我希望第一次useState状态为假。
我可以使用类组件来实现它，而不是通过功能组件。
类组件代码
class App extends React.Component {
state = { visible: false, childrenDrawer: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
浏览 2提问于2020-10-09得票数 0
2回答
我想知道是否有可能得到我需要的组件实例。
我将新组件作为子组件放置在主状态，但在两个文件中都不是相同的对象。
我需要到达我的MainComponent中的儿童州。在谷歌寻找组件的例子没有帮助，也许我失去了焦点，这是不同的名称。
这是我的MainComponent：
import React, { Component } from 'react';
import AnotherComponent from './../whatever/AnotherComponent';
class MainComponent extends Component {
con
浏览 1提问于2019-02-26得票数 0
回答已采纳
2回答
我试图将对象数组(最终将替换为实际数据的axios调用)从父组件传递到子组件，并进一步从一个子组件传递到其他子组件，但我无法传递，因为我收到错误消息“对象作为React子组件无效(找到:带键的对象)。如果您打算呈现一个子对象集合，请改用数组。” /ABC.js import React from 'react'
import ABCD from '../ABCD/ABCD'
const plans = [
{
id:'1',
title:'option 1',
value:'option1&
浏览 17提问于2019-09-12得票数 0
回答已采纳
1回答
我目前使用的是带有Firebase Javascript SDK的ReactJs前端。它在后端使用NodeJS连接到一个firebase功能的存储仿真器。
通常，我可以从我的前端调用一个functions.https.onCall(...)云函数(已经用nodejs设置的)并收到一个promise，然后我就可以正常使用前端的数据了。
但是，在后端使用functions.storage.object().onFinalize(...)时，我试图强制某种方式在文件成功处理后向前端返回一条成功消息。
下面是我尝试过的：
我的后台代码(Nodejs)：
exports.processMedia = f
浏览 1提问于2021-07-18得票数 0
1回答
我是新的反应本土，我正在开发我的最后一年的项目使用它。当试图获取子组件的值时，我面临一个问题。我用DateTimePicker制作了自己的组件(只显示日期)，然后在另一个屏幕上使用这个日期选择器。当使用选择器选择一个新值时，我希望将这个新值存储在父状态中。我在网上做了一些研究，发现我需要把数据从孩子那里传递给父母。我试过这样做，但现在我得到了以下错误：
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.props.onSelectDate')]
您可以在下
浏览 3提问于2021-04-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
