Reactjs 在功能组件内调用API

我希望根据从功能组件的下拉列表中选择的值调用API。我在函数组件之外定义了一个函数，它接受参数并调用API。我正在使用useState钩子存储在action\u name state value中选择的值。但该状态在callSomeAPI函数中不可用。我应该在我的组件中移动CallSomeApi函数吗？这甚至是一种有效的方法吗

    function callSomeAPI(container_name) {
      console.log(container_name);
      action_name = event.target.value;
      let e = document.getElementById("actions")
      console.log(e.target)
      action_name = e.target
      fetch(<some_url>, {
        method: 'PUT',
      })
        .then(response => console.log(response.json()))
        .catch(console.log("error problem in api request"));
      e.preventDefault();
    }

    export function AlertsRenderer(props) {
      const [action_name, callSomeAPI] = useState(null);
      return (
        <table>
          <tr>
            <th> Column1 </th>
            <th> Column2 </th>
            <th> Column3 </th>
            <th> Button </th>
            <th> Actions </th>
          </tr>
          {props.alerts.map(alert => (
            <tr key={alert.id.toString()}>
              <td>{alert.data1}</td>
              <td>{alert.data2}</td>
              <td>{alert.data3}</td>
              <td>
                <button value={alert.id} onClick={() => markAsSolved(alert.id)}>Mark as solved</button>
              </td>
              <td>
                <select  defaultValue={action_name} onChange={() => callSomeAPI(alert.data1)} name="actions" id="actions">
                  <option hidden disabled selected value>Select an action</option>
                  <option value="inc-disk">Increase disk size</option>
                  <option value="restart-php">Restart PHP</option>
                </select>
              </td>
            </tr>
              ))}
        </table>
      );
    }

函数callSomeAPI（容器名称）{
console.log（容器名称）；
action_name=event.target.value；
设e=document.getElementById（“操作”）
console.log（例如target）
动作名称=e.target
获取（{
方法：'放'，
})
.then（response=>console.log（response.json（）））
.catch（console.log（“api请求中的错误问题”）；
e、 预防默认值（）；
}
导出功能AlertsRenderer（道具）{
const[action_name，callSomeAPI]=useState（null）；
返回(
专栏1
专栏2
第3栏
按钮
行动
{props.alerts.map（alert=>(
{alert.data1}
{alert.data2}
{alert.data3}
markAsSolved（alert.id）}>标记为已解决
callSomeAPI（alert.data1）}name=“actions”id=“actions”>
选择一个动作
增加磁盘大小
重新启动PHP
))}
);
}

当操作名称更改时，您可以使用钩子监听，当操作更改时，您可以获取api

function fetchAPI(action_name) {
      fetch(<some_url>, {
        method: 'PUT',
      })
        .then(response => console.log(response.json()))
        .catch(console.log("error problem in api request"));
      e.preventDefault();
    }


 export function AlertsRenderer(props) {
      const [action_name, callSomeAPI] = useState(null);
     
      useEffect(()=> {
         fetchAPI(action_name)
     }, [action_name]) 

      return (
        <table>
          <tr>
            <th> Column1 </th>
            <th> Column2 </th>
            <th> Column3 </th>
            <th> Button </th>
            <th> Actions </th>
          </tr>
          {props.alerts.map(alert => (
            <tr key={alert.id.toString()}>
              <td>{alert.data1}</td>
              <td>{alert.data2}</td>
              <td>{alert.data3}</td>
              <td>
                <button value={alert.id} onClick={() => markAsSolved(alert.id)}>Mark as solved</button>
              </td>
              <td>
                <select  defaultValue={action_name} onChange={() => callSomeAPI(alert.data1)} name="actions" id="actions">
                  <option hidden disabled selected value>Select an action</option>
                  <option value="inc-disk">Increase disk size</option>
                  <option value="restart-php">Restart PHP</option>
                </select>
              </td>
            </tr>
              ))}
        </table>
      );
    }

函数fetchAPI（操作名称）{
获取（{
方法：'放'，
})
.then（response=>console.log（response.json（）））
.catch（console.log（“api请求中的错误问题”）；
e、 预防默认值（）；
}
导出功能AlertsRenderer（道具）{
const[action_name，callSomeAPI]=useState（null）；
useffect（（）=>{
fetchAPI（操作名称）
}，[行动名称]）
返回(
专栏1
专栏2
第3栏
按钮
行动
{props.alerts.map（alert=>(
{alert.data1}
{alert.data2}
{alert.data3}
markAsSolved（alert.id）}>标记为已解决
callSomeAPI（alert.data1）}name=“actions”id=“actions”>
选择一个动作
增加磁盘大小
重新启动PHP
))}
);
}

你在这里做的事情很奇怪。您需要一个将所选值作为参数的callSomeAPI函数。不要从DOM那里得到它。使用受控选择。