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

【问题标题】：React.js - How do I pass data from a div to a function with axios POST method?React.js - 如何使用 axios POST 方法将数据从 div 传递到函数？
【发布时间】：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} alt=""/>
              {result.artistName} - {result.albumName}
            </div>
          ))}
        </div>
      </div>
    </Container>
  );

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

【问题讨论】：

标签： reactjs react-hooks axios

【解决方案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 如果完全回答了您的问题，请考虑将答案标记为已接受（下方的复选标记）。