如何在React中為動態渲染的組件設定狀態變數

我有一個充滿用戶資料的陣列，但我正在映射以顯示其資訊，并且我希望每個監視串列都有一個按鈕來洗掉該監視串列（后端已經作業，我deleteWatchlist使用現有的字串值測驗了該函式觀察名單）。我的問題是我在映射到第一個陣列后得到了我需要的監視串列的名稱。

如何為每個監視串列設定 watchlistName 的狀態？

import axios from "axios";
import { useSession } from "next-auth/react";
import React, { useState } from "react";
import useSWR from "swr";
import CoinInUserProfile from "./CoinInUserProfile";
const fetcher = (...args) => fetch(...args).then((res) => res.json());

function WatchlistContainer() {
  const { data: session } = useSession();

  const { data: userData, userError } = useSWR(
    `http://localhost:5000/api/users/${session?.id}`,
    fetcher
  );
  const [watchlistName, setWatchlistName] = useState();

  const deleteWatchlist = async () => {
    try {
      const res = await axios({
        url: `http://localhost:5000/api/users/${session?.id}/deletewatchlist`,
        method: "PUT",
        data: {
          watchlistName: watchlistName,
        },
      });
    } catch (error) {
      console.log(error);
    }
  };
  if (userError) return <div>failed</div>;
  if (!userData) return <div>loading data...</div>;
  console.log(userData);

  return (
    <div className="flex flex-col">
      {userData.watchlists.map((i) => (
        <div key={i._id} className="flex flex-col bg-blue-200 m-1">
          <p className="text-2xl text-blue-600">{i.watchlistName}</p>
          <button type="button" onClick={deleteWatchlist}>
            delete
          </button>
          {i.coins[0].coin.map((coin) => {
            return (
              <div>
                {/* <p key={coin.coinID}>{coin.coinID}</p> */}
                <CoinInUserProfile
                  coinID={coin.coinID}
                  name={coin.name}
                  symbol={coin.symbol}
                  watchlistName={i.watchlistName}
                />
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

export default WatchlistContainer;

uj5u.com熱心網友回復：

您不需要在每次迭代時在動態呈現的組件中使用狀態，將當前監視串列 ( i.watchlistName) 作為引數傳遞到函式中。為此，請按如下方式更新您的代碼：

注意：還要注意同步背景關系中的異步函式回傳一個承諾。

洗掉監視串列

 const deleteWatchlist = async (watchlistName) => {
    
    try {
      const res = await axios({
        url: `http://localhost:5000/api/users/${session?.id}/deletewatchlist`,
        method: "PUT",
        data: { watchlistName }, // variable name same as key name can be used this way
      });
    } catch (error) {
      console.log(error);
    }
  };

洗掉按鈕

          <button type="button" onClick={()=>deleteWatchlist(i.watchlistName)}>
            delete
          </button>

如果碰巧 react 不會在axiosAPI 呼叫回應上觸發重新渲染，請將以下代碼添加到deleteWatchList函式中：

  const deleteWatchlist = async () => {
    try {
      const res = await axios({
        url: `http://localhost:5000/api/users/${session?.id}/deletewatchlist`,
        method: "PUT",
        data: {
          watchlistName: watchlistName,
        },
      });
      // Code to Add
      res.then(response=>{
         // pull the deleted watchlist in the backend from the selected `user.watchLists` object in the current session.
      })  
      // Code to Add
    } catch (error) {
      console.log(error);
    }
  };

關于 Rest API 端點的建議

Rest API 是一種用于非常特定目的的語意模型，因此一個端點代表一個CRUD（創建、檢索、更新、洗掉）。

而不是將端點暴露為http://localhost:5000/api/users/${session?.id}/deletewatchlist使用POST更新您的 API 來接受對 'DELETE' 方法的呼叫。

And update the endpoint to http://localhost:5000/api/userwahtchlist.

Make the session.id the cookie and retreive the cookie on the request object in your web api. (will be something like req.cookie if you are perhaps using express.

標籤：javascript 反应 下一个.js 状态

上一篇：使用ES6模塊從命令列（NodeJS）運行腳本中的函式

下一篇：javascriptindexOf包含元素的類