Question

我正在尝试在提交时追加数据，但我一直收到此错误。

第53行：希望进行赋值或函数调用，而是看到了表达式no-unused-expressions

我正在尝试将用户提交的数据附加为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;

Answer 1

您没有从map方法返回任何内容。要么使用return：

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

或使用implicit return：

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

评论后编辑

由于没有任何item.id，因此您将收到关键警告。我使用了item.name。当然，您应该选择更好的键。

无法在React中将数据追加到表

1 个答案: