Reactjs 铁路超高'；使用React钩子时不要重新呈现引导表

我试图在使用react钩子向表中添加数据后呈现该表。最初处于该状态的数据呈现得非常完美，但是当我添加其他项时，它们在重新呈现后不会出现在表中。这两个输入是类别和子类别，属于下拉列表类型。每次重新渲染后，我都会记录skills属性，控制台显示它们已添加到数组中，但它们不会在表中显示。这是我的代码：

  export default function ResourceForm() {
  const [marked, setMarked] = useState(false);
  const [skills, setSkills] = useState([
    { cat: "h", sub: "f" },
    { cat: "h", sub: "f" },
    { cat: "h", sub: "f" },
    { cat: "h", sub: "f" },
  ]);

  var skill = { cat: "", sub: "" };
  var handleChangeCat = (event) => {
    skill.cat = event.target.value;
  };
  var handleChangeSub = (event) => {
    skill.sub = event.target.value;
  };
  function handleAdd(event) {
    event.preventDefault();
    skills.push(skill);
    setSkills(skills);
    console.log(skills);
  }


 return (

<div>
<h1 className="formHeaders">Technical skills</h1>
          <form>
            <div class="form-row">
              <div class="form-group col-md-4">
                <label for="function">Category</label>
                <select
                  class="form-control"
                  required
                  onChange={(event) => handleChangeCat(event)}
                >
                  <option value="" disabled selected>
                    Select Category
                  </option>
                  <option value="app dev">app dev</option>
                  <option value="web">Web</option>
                </select>
              </div>
              <div class="form-group col-md-4">
                <label for="function">Sub-category</label>
                <select
                  class="form-control"
                  required
                  onChange={(event) => handleChangeSub(event)}
                >
                  <option value="" disabled selected>
                    Select Sub-category
                  </option>
                  <option value="Swift">Swift</option>
                  <option value="Java">Java</option>
                </select>
              </div>
              <div class="form-group col-md-3">
                <button
                  type="submit"
                  class=" add btn btn-primary"
                  onClick={(event) => handleAdd(event)}
                >
                  Add
                </button>
              </div>
            </div>
          </form>
          <div className="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Category</th>
                  <th scope="col">Sub-category</th>
                </tr>
              </thead>
              <tbody>
                {skills.map((s, index) => (
                  <tr>
                    <td>{s.cat}</td>
                    <td>{s.sub}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </form>
</div>
)};

导出默认函数ResourceForm（）{
const[marked，setMarked]=使用状态（false）；
常量[技能，设置技能]=使用状态([
{cat:“h”，sub:“f”}，
{cat:“h”，sub:“f”}，
{cat:“h”，sub:“f”}，
{cat:“h”，sub:“f”}，
]);
var skill={cat:，sub:：}；
var handleChangeCat=（事件）=>{
skill.cat=event.target.value；
};
var handleChangeSub=（事件）=>{
skill.sub=event.target.value；
};
功能手册D（事件）{
event.preventDefault（）；
推（技巧）；
技能；
控制台日志（技能）；
}
返回(
技术技能
类别
handleChangeCat（事件）}
>
选择类别
应用程序开发
网状物
子类别
handleChangeSub（事件）}
>
选择子类别
敏捷的
JAVA
牵线（事件）}
>
添加
类别
子类别
{skills.map（（s，索引）=>(
{s.cat}
{s.sub}
))}
)};

您正在设置技能数组。react无法识别状态的更改，因为数组中的元素正在更改。你能做的就是这样

function handleAdd(event) {
    event.preventDefault();
    skills.push(skill);
    setSkills([...skills]);     -> spread to a new array
    console.log(skills);
  }

看看它是否有效