Javascript 如何消除React应用程序中的“函数作为React子级无效”警告

我是React的新手，我正在React中借助挂钩开发简单的CRUD应用程序。 该应用程序有两个表单组件AddUserForm和EditUserForm，它们可以相应地添加和编辑用户列表。还有一个显示用户列表的组件，但我没有收到警告。 一切正常，但我的浏览器控制台中有以下警告消息： 函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者您可能想调用此函数而不是返回它

下面是我如何在App.js文件中呈现子组件。我用红色箭头标记了警告的行

更新 以下是我如何在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。

您的控制台警告您有关AddUserForm组件，这看起来像是其中的问题。我刚刚添加了AddUserForm组件的相关代码。