[英]How to get rid of "Functions are not valid as a React child" warning in React app
我是 React 新手,我正在借助Hooks在 React 中开发简单的 CRUD 应用程序。
该应用程序有两个表单组件AddUserForm
和EditUserForm
,它们相应地添加和编辑用户列表。 还有一个显示用户列表的组件(但我没有在那里收到警告)。
一切正常,但我的浏览器控制台中有以下警告消息:
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
.
这是我在 App.js 文件中呈现子组件的方式。 (我用红色箭头标记了我有警告的行)
更新这是我在AddUserForm
组件中处理表单的AddUserForm
:
return (
<Fragment>
<form> // line 15, here I have warning as well
onSubmit=
{event => {
event.preventDefault();
if (!user.name || !user.username) return;
props.addUser(user);
setUser(initialFormState);
}}
<label>Name</label>
<input type='text' name='name' value='' onChange={handleInputChange} />
<label>Username</label>
<input
type='text'
name='username'
value=''
onChange={handleInputChange}
/>
<button>Add new user</button>
</form>
</Fragment>
);
我已经检查了一些在这里编写的解决方案,但没有一个对这个问题有帮助。
你能告诉我我做错了什么吗?
我认为这只是一个错字:
<form> // You just closed form element, so
onSubmit=
{event => { // this is a function returned as a React child
event.preventDefault();
if (!user.name || !user.username) return;
props.addUser(user);
setUser(initialFormState);
}}
<label>Name</label>
<input type='text' name='name' value='' onChange={handleInputChange} />
<label>Username</label>
<input
type='text'
name='username'
value=''
onChange={handleInputChange}
/>
<button>Add new user</button>
应该是这样的:
<form // Note the missing >
onSubmit=
{event => { // this is a function returned as a React child
event.preventDefault();
if (!user.name || !user.username) return;
props.addUser(user);
setUser(initialFormState);
}}> // form opening tag closed here
这实际上不是 React 问题,而是无效的 HTML 导致 React 抛出错误,因为它无法解析和呈现 JSX。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.