React 警告：函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况答案

【问题标题】：React Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from renderReact 警告：函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况
【发布时间】：2021-06-23 18:20:41
【问题描述】：

我正在尝试使用这个自定义钩子，它可以为我带来一条来自路由的本地消息。

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

所以，当我尝试从我的 App.js 组件中的这个钩子调用“handleMessage”函数时，会出现以下警告：警告：函数作为 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;

我能做些什么来解决这个问题？

【问题讨论】：

您能否确认第一个div 中缺少的{ 只是复制/粘贴错字？您还可以通过尝试在不呈现Body 和Footer 的情况下消除其他可能的原因吗？
没错，缺少的“{”是复制粘贴错误，我将对其进行编辑。另一方面，我尝试在没有正文和页脚的情况下进行渲染，但警告不断出现。
您的控制台日志输出什么？ console.log(LocalFlashMessage)?
当我在另一个组件中注册时，它会显示一条消息，例如“您已成功注册”。我只是把它用于测试。
您的代码没有显示您实际调用 handleMessages... 的位置，而带有 LocalFlashMessage... 的三元组是否缺少某些东西？

标签： javascript reactjs react-hooks

【解决方案1】：

await axios 返回一个对象，您尝试将其呈现为组件。你不能在 React 中这样做。

我认为您正在寻找的是从 axios 调用中输出消息，该消息将位于 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，它是一个函数，而不是一个反应函数。您需要在 useEffect 或其他辅助函数中调用它，然后只渲染 LocalFlashMessage

【讨论】：

【解决方案2】：

问题已解决。多亏了这些 cmets，我用 useEffect() 钩子重组了我的本地消息系统。现在我的系统使用一个名为“ShowLocalMessages”的组件，它从本地存储接收消息数据并用它更新它的状态。如果存在本地消息，它将显示它。

【讨论】：

如果以上答案解决了您的问题，请标记为解决方案！