如何传递表单输入并将它们添加到对象数组中？

Question

我想让我的网站能够将名称和犬种添加到现有的动物列表中。

export const addNewPlayer = async (playerObj) => {
  try {
    const response = await fetch(
      `${APIURL}players/`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: 'Rufus',
          breed: 'Irish Setter',
        }),
      }
    );
    const result = await response.json();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
};

这是创建新播放器的功能

let form = document.querySelector('#new-player-form > form');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    
    let playerData = {
      name: form.elements.name.value,
      breed: form.elements.breed.value
    }
    console.log(playerData)

    const players = await fetchAllPlayers()
    renderAllPlayers(players)
    addNewPlayer(playerData);

    renderNewPlayerForm()

  });

这也是我这里的表格。

我只是对如何将“Rufus”和“Irish Setter”更改为用户输入感到困惑。当记录 playerData 时，我可以看到它在检查时正在运行，但它只添加了“Rufus”的位置。

给出了一些代码，我只是对代码中第一个 playerObj 参数感到困惑。我没有看到任何用途，并且 addNewPlayer 中的大部分内容也在作为项目一部分的 API 网站中提供。我试图创建名称并生成空字符串，但从中得到了一个错误。

Answer 1

您需要的所有信息都在您的playerData 变量中。因此，只需将其中的信息添加到您的申请正文中。尝试这个：

export const addNewPlayer = async (playerObj) => {
//...
body: JSON.stringify({
      name: playerObj.name,
      breed: playerObj.breed,
    }),