React警告:函数作为React子级无效。如果从render返回一个组件而不是< Component />,可能会发生这种情况
我正在尝试使用此自定义钩子，从路由中为我带来本地消息。
import { useState } from 'react';
import axios from 'axios';
const useLocalFlashMessages = () => {
const [LocalFlashMessage, setLocalFlashMessage] = useState();
const handleMessages = async () => {
setLocalFlashMessage(await axios.get('http://localhost:3000/localFlashMessages/'))
return LocalFlashMessage
};
return [
LocalFlashMessage,
handleMessages
]
}
export default useLocalFlashMessages
因此，当我尝试从应用程序中的这个钩子调用“handleMessage”函数时。js组件，出现以下警告：警告：函数作为React子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你想调用这个函数而不是返回它。
有我的App.js：
import './css/Header.css';
import Body from './components/Body';
import Footer from './components/App/Footer';
import useLocalFlashMessages from './hooks/useLocalFlashMessages';
function App() {
const [LocalFlashMessage, handleMessages] = useLocalFlashMessages()
console.log(LocalFlashMessage)
return (
<div className="Main">
<main className="Main-body">
{LocalFlashMessage ? <div> {LocalFlashMessage}</div> : <div>{handleMessages}</div>}
<Body />
</main>
<footer className="Main-footer">
<Footer />
</footer>
</div>
);
}
export default App;
我能做些什么来解决这个问题？
共有2个答案
问题解决了。多亏了这些评论，我已经使用useEffects（）挂钩重组了我的本地消息sistem。现在我的sistem与一个名为“ShowLocalMessages”的组件一起工作，该组件从本地存储接收消息数据并使用它更新其状态。如果存在本地消息，它将显示它。
await axios 返回一个对象，您尝试将其呈现为组件。你不能在 React 中执行此操作。
我认为您正在寻找的是输出来自axios调用的消息，该消息将在< code>data字段中
const resp = await axios.get('http://localhost:3000/localFlashMessages/');
setLocalFlashMessage(resp.data);
return resp.data
这条线上还有一个问题：
{LocalFlashMessage ? <div> {LocalFlashMessage}</div> : <div>{handleMessages}</div>}
handleMessage将返回一个作为函数而不是反应函数的Promise。您需要在useEffects或其他帮助函数中调用它，然后只渲染LocalFlashMessage而不是
-
假设我有一个需要函数的组件，它应该返回一些基于我在< code>filterTypesArray中接收的生成的“DOM”结构。然后我想在我的类的返回函数中使用< code>{generateInputs}来呈现它。它给了我一个警告。为了避免这种情况，我必须在< code>render函数中将这种类型的逻辑实现为某个< code>const。我是新反应，我不知道为什么会这样。我没有从那条警告信息中看
-
我是新手，我正在使用非官方的哈利波特api构建一个应用程序。 这是应用程序: 当我登录控制台时，来自API的JSON响应成功显示，但是我在渲染输出时遇到了问题。我正在使用Bulma进行前端样式。 这在我的app.js中 这是错误消息： 后端。js:6警告：函数作为React子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你想调用这个函数而不是返回它。在p中（由HouseHi
-
问题内容： 我写了一个高阶组件： 我在我的App.js中使用以上内容： 但是，我得到的警告是： 警告：函数作为React子代无效。如果您从渲染返回一个Component而不是 ，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。在应用程序的div（由应用程序创建）中的NewHOC（由应用程序创建）中 Movie.js文件为： 我究竟做错了什么？ 问题答案： 您将其用作常规组件，但实际上
-
我有视图组件，它必须导入多个组件。这些组件将根据某些特定条件进行渲染。它应该如何工作是，我在页面上有3个按钮，例如，在我点击第一个按钮(文件上传)后，我需要渲染<代码> 警告：函数作为React子函数无效。如果您返回组件而不是从渲染中返回，可能会发生这种情况。或者您可能打算调用此函数而不是返回它。 这到底有什么问题？
-
movie.js文件是： 我做错了什么？
-
以下是主要游戏.js和应用程序.js文件： 在game.js文件中，我在H1中使用了numPicker函数。现在我得到了这个错误: 警告：函数作为React子函数无效。如果您返回组件而不是从渲染中返回，可能会发生这种情况。或者您可能打算调用此函数而不是返回它。