React.js - 如何使用 axios POST 方法将数据从 div 传递到函数？

Posted 2023-03-28

【中文标题】React.js - 如何使用 axios POST 方法将数据从 div 传递到函数？

【英文标题】：React.js - How do I pass data from a div to a function with axios POST method?

【发布时间】：2022-01-14 11:57:32

【问题描述】：

我想将字符串从映射元素传递到一个函数，该函数应该在单击所述元素时触发，然后执行发布请求。这是函数：

const update = () => 
    axios.
      post("http://localhost:4000/api/albums/favorites", "???")
      .then(res => 
        console.log(res);
      )
  

这是我的映射数据所在的位置：

return(
    <Container className="d-flex flex-column py-2" style= height: "100vh" >
      <Form.Control
        type="search"
        placeholder="Search Songs/Artists"
        value=search
        onChange=e => setSearch(e.target.value)
      />
      <div className="flex-grow-1 my-100" style= overflowY: "auto" >
        <div className="d-flex m-2 align-items-center card-body">  
          searchResult.map(result => (
            <div style= cursor: "pointer"  onClick=update> 
              <img key=result.imageUrl src=result.imageUrl />
              result.artistName - result.albumName
            </div>
          ))
        </div>
      </div>
    </Container>
  );

这是我通过 api 从搜索栏的结果中获得的数据。我应该如何引用数据来代替???在更新功能？我试图寻找答案，但我可能不知道如何很好地表达我的问题。

【参考方案1】：

您可以像这样将每个结果传递给您的 update 函数

<div style= cursor: "pointer"  onClick=() => update(result)> 
...

并使您的更新函数接受您将在 axios 请求中使用的参数

const update = (data) => 
    axios.
      post("http://localhost:4000/api/albums/favorites", data)
      .then(res => 
        console.log(res);
      )

现在每个结果 div 在点击时都会触发更新功能，但会绑定到它的数据

【讨论】：

@mehawelm11 如果完全回答了您的问题，请考虑将答案标记为已接受（下方的复选标记）。