问使用ReactJS中表中行的数据从下拉列表中获取选定值

EN

import React, { useEffect, useState } from "react";

// I have a requirement where i render a table from
// array passed as props to the component. Table contain s
// dropdown in each row and on selecting any value from dropdown,
// I want to call external APIs based on the selected value.
// The API also requires key1 value from td for which dropdown
// value was changes?

// i am facing a problem where I can't get selected action
// and key1 value into the API call function. Plus, If i select a
// value from dropdown, all dropdown values are changed simultaneously
// (i can understand why it is happening). How to avoid this? Or may be,
// it can not be avoided, is there a better way to render same thing in
// other way which allows for the required functionality?

export default function ({ alerts }) {
  // constructor(props) {
  //   super(props);
  //   this.callAPI = this.callAPI.bind(this);
  //   this.state = {
  //     container: "",
  //     action: ""
  //   };
  // }
  const [selectedAction, setSelectedAction] = useState({});
  const [key1Value, setkey1Value] = useState();
  useEffect(() => {
    if (selectedAction === "a") {
      // Fetch API call here should be able to access key1Value
      // requires container as well as action state which shoould be set to key1 from the same row whenever value is changed for dropdown
      //...
    } else {
      // Alternate Fetch API call here
      // requires container state which shoould be set to key1 from the same row whenever value is changed for dropdown
      //...
    }
  }, [selectedAction]);

  return (
    <table>
      <tr>
        <th> Subject </th>
        <th> Source </th>
        <th> Actions </th>
      </tr>
      {alerts.map((alert) => (
        <tr key={alert.id.toString()}>
          <td>{alert.key1}</td>
          <td>{alert.key2}</td>
          <td>
            <select
              onChange={(e) => {
                setkey1Value(alert.key1);
                setSelectedAction({...selectedAction, [alert.key1]: e.target.value});
              }}
              value={selectedAction[alert.key1]}
              name="actions"
              id="actions"
            >
              <option hidden disabled selected value>
                Select an action
              </option>
              <option value="a">Action A</option>
              <option value="b">Action B</option>
            </select>
          </td>
        </tr>
      ))}
    </table>
  );
}