Javascript 无法将数据追加到react中的表中

我试图在提交时附加数据，但我一直收到这个错误

第53行：应为赋值或函数调用，而不是看到 表达式没有未使用的表达式

我试图将用户提交的数据作为td追加到表中。 我做错了什么，或者有没有更好的方法

这是密码

import React, { Fragment, useState } from "react";

const Table = () => {
  const [count, setCount] = useState({ name: "", email: "" });
  const [obj, setObj] = useState([]);
  const handleSubmit = event => {
    if (event) {
      event.preventDefault();
      setObj([...obj, { name: count.name, email: count.email }]);
    }
  };

  const handleInputChange = event => {
    event.persist();
    setCount(count => ({ ...count, [event.target.name]: event.target.value }));
  };

  console.log(count);

  return (
    <Fragment>
      <div className="container-fluid">
        <form className="form-inline" onSubmit={handleSubmit}>
          <input
            className="form-control"
            type="text"
            name="name"
            placeholder="Add Name"
            onChange={handleInputChange}
            value={count.name}
            required
          />
          <input
            className="form-control"
            type="email"
            name="email"
            placeholder="Add Email"
            onChange={handleInputChange}
            value={count.email}
            required
          />
          <input type="submit" value="Add" className="btn btn-dark" />
        </form>
        <table className="table-striped">
          <tbody>
            <tr>
              <th>Name</th>
              <th>Email</th>
            </tr>
            {obj.length !== 0 &&
              obj.map(item => {
                <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.email}</td>
                </tr>;
              })}
          </tbody>
        </table>
      </div>
    </Fragment>
  );
};

export default Table;

import React，{Fragment，useState}来自“React”；
常数表=（）=>{
const[count，setCount]=useState（{name:，email:}）；
const[obj，setObj]=useState（[]）；
const handleSubmit=事件=>{
如果（事件）{
event.preventDefault（）；
setObj（[…obj，{name:count.name，email:count.email}]）；
}
};
const handleInputChange=事件=>{
event.persist（）；
setCount（count=>（{…count，[event.target.name]：event.target.value}）；
};
控制台日志（计数）；
返回(
名称
电子邮件
{obj.length！==0&&
对象映射（项=>{
{item.name}
{item.email}
;
})}
);
};
导出默认表；

您没有从

映射

方法返回任何内容。使用或返回：

obj.map(item => {
  return (
    <tr key={item.name}>
    <td>{item.name}</td>
    <td>{item.email}</td>
  </tr>
  );
})

obj.map（项目=>{
返回(
{item.name}
{item.email}
);
})

或使用：

obj.map（项目=>(
{item.name}
{item.email}
))

评论后编辑

---

由于没有任何

项.id

，您将收到密钥警告。我使用了

item.name

。当然，您应该选择更好的键。

警告：列表中的每个子项都应该有一个唯一的“键”道具。这是另一个问题，你可以很容易地找到解决办法：）我将在我的回答中修正这个警告，但搜索你的问题是一个好习惯。我知道，但这个问题对我来说花了一段时间，一个简单的返回语句就可以解决这个问题。名称可能是重复的，我应该使用一些索引吗？如果您确定数组的顺序不会改变，那么您可以使用索引作为键，但通常不建议这样做。当您使用maybe创建数据时，您可以创建

id

s。

obj.map(item => (
  <tr key={item.name}>
    <td>{item.name}</td>
    <td>{item.email}</td>
  </tr>
))