React中如何为动态渲染的组件设置state变量实现watchlist逐个删除

解决方案 #

你不需要单独维护全局的watchlistName state，直接在触发删除时传入当前遍历项的watchlist名称即可，这是最简洁也最不容易出异步问题的实现方式。
具体修改点如下：

1. 改造deleteWatchlist函数，让它接收要删除的watchlist名称作为入参
2. 给删除按钮的点击事件绑定箭头函数，把当前遍历到的i.watchlistName传入deleteWatchlist

修改后的完整代码：

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
  );
  // 原有的watchlistName state可以直接删除，不需要使用

  // 新增入参，接收要删除的watchlist名称
  const deleteWatchlist = async (watchlistName) => {
    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>
          {/* 点击时传入当前遍历项的watchlist名称 */}
          <button type="button" onClick={() => deleteWatchlist(i.watchlistName)}>
            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;

如果你的业务场景确实需要把当前选中的watchlistName存到state里（比如需要做二次确认弹窗等需求），也可以在点击按钮的时候先赋值state再执行删除，代码示例如下：

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

需要注意state更新是异步的，可能会出现取值滞后的问题，所以优先推荐直接传参的方案。

内容的提问来源于stack exchange，提问作者Eric Pezzulo