Блог

Я пытаюсь отобразить таблицу после добавления в нее данных с помощью реактивных перехватов. Данные, которые изначально находятся в состоянии, отображаются отлично, однако, когда я добавляю другие элементы, они не отображаются в таблице после повторного рендеринга. Двумя входными данными являются категория и подкатегория, и это выпадающий список типа. Я регистрирую атрибут 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>
)};
  

вы устанавливаете массив навыков. react не может определить изменение состояния только потому, что изменяются элементы внутри массива. что вы можете сделать, так это

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

  

и посмотреть, работает ли это