Reactjs React.js：将值从表单传递到axios POST请求

我对我现在正在做的事情感到非常困惑

我试图将表单数据传递到axios POST请求中，但我不确定我做错了什么

以下是表格的代码：

ClientMaintenancePage.js

const [dataBanks, setDataBanks] = useState([]);
const [optionsBrstn, setOptionsBrstn] = useState('');

...

const retrieveBanks = useCallback(() => {
ClientMaintenanceService.retrieveBanks()
.then((response) => {
  console.log("ClientMaintenancePage - retrieveBanks response.data >>> " + response.data)
  setDataBanks(response.data);
}).catch((err) => {
  console.log("ClientMaintenancePage - retrieveBanks catch >>> " + err)
})
});

const saveBrstn = useCallback(() => {
ClientMaintenanceService.saveBankMaintenance(optionsBrstn)
.then((response) => {
  console.log("ClientMaintenancePage - saveBrstn response.data >>> " + response.data)
}).catch((err) => {
  console.log("ClientMaintenancePage - saveBrstn catch >>> " + err)
})
});

useEffect(() => {
retrieveBanks();
}, []);

...

const newOptions = dataBanks.map(({BIC, BRSTN, NAME}) => ({
label: BIC + "  " + BRSTN + "  " + NAME ,
value: BRSTN
}))

return (
<Select 
          id="selectBrstn"
          isSearchable="true"
          options={ newOptions } 
          placeholder="Select BIC / BRSTN / Bank Name..." 
          value={ optionsBrstn }
          onChange={ setOptionsBrstn }
        />
)

const LOCAL_API_URL_SAVE_BANK_MAINTENANCE = "http://XX.XX.XX.XX:8080/cpex/bank/maintenance/save"

saveBankMaintenance(optionsBrstn){
    console.log("saveBankMaintenance axios.post - optionsBrstn >>> " + optionsBrstn)
    return axios.post(`${LOCAL_API_URL_SAVE_BANK_MAINTENANCE}`, {
        brstn: optionsBrstn
    })
}

如果我是正确的，我想在我的状态选项BRSTN中有下拉列表的值

在我的服务调用中，我将其作为参数传递，但不知何故，我没有将其作为字符串

---

TIA反应选择的值是（对象、对象数组、空和未定义）之一

然后，如果需要将对象的属性作为值，则有三个选项：

1-创建一个自定义组件并使用

react在其中选择
，然后编写自定义
onChange
，并将需要的对象属性返回到自定义
onChange

2-如果您总是不需要将对象的属性作为
选择的值，您应该在更改
时编写自己的
而不是直接编写
设置选项brstn

const onChange=(outputObject)=>{
  setOptionsBrstn(output.yourProperty)
}

<Select 
  ...
  onChange={onChange}
  ...
/>

const onChange=（outputObject）=>{
setOptionsBrstn（output.yourProperty）
}

3-您可以在
saveBankMaintenance
中获取一个对象作为参数，并使用所需对象的属性

我希望这对您有所帮助。
react select的值是（object、array of object、null和undefined）之一

然后，如果需要将对象的属性作为值，则有三个选项：

1-创建一个自定义组件并使用
react在其中选择
，然后编写自定义
onChange
，并将需要的对象属性返回到自定义
onChange

2-如果您总是不需要将对象的属性作为
选择的值，您应该在更改
时编写自己的
而不是直接编写
设置选项brstn

const onChange=(outputObject)=>{
  setOptionsBrstn(output.yourProperty)
}

<Select 
  ...
  onChange={onChange}
  ...
/>

const onChange=（outputObject）=>{
setOptionsBrstn（output.yourProperty）
}

3-您可以在
saveBankMaintenance
中获取一个对象作为参数，并使用所需对象的属性

我希望这对您有所帮助。
首先您应该检查
选择的输出，然后为
onChange编写一个函数并记录输出。如果输出是正确的数据（您需要），那么您可以设置为
状态
。确保您的
Select
导出字符串值。我尝试在Select对象的输出中使用JSON.stringify。它显示了以下值：{“标签”：“BOFAPH2XXXX 010120019美国银行NATL ASSN”，“值”：“010120019”}。是否有办法只能获取值？您的
选择
是一个自定义组件，或来自
材料ui
或其他库？你能说出你从哪里导入的吗？从“反应选择”导入选择；它是一个名为react select的自定义库。请看，首先您应该检查
选择的输出，然后为
onChange编写一个函数并记录输出。如果输出是正确的数据（您需要），那么您可以设置为
状态
。确保您的
Select
导出字符串值。我尝试在Select对象的输出中使用JSON.stringify。它显示了以下值：{“标签”：“BOFAPH2XXXX 010120019美国银行NATL ASSN”，“值”：“010120019”}。是否有办法只能获取值？您的
选择
是一个自定义组件，或来自
材料ui
或其他库？你能说出你从哪里导入的吗？从“反应选择”导入选择；它是一个名为react select的自定义库。请看，我尝试了选项2，因为它看起来更容易。然而，我得到了错误，因为我也是ecmascript的新手。const onchangebrstndroptown=（outputObject）=>{setOptionsBrstn（outputObject.value）}首先进入
onchangebrstndroptown
write
console.log（outputObject）
查看输出内容。（没有任何JSON.stringify）这是调用
onchangebrstndroptown
的正确方法吗
onChange={onChangeBrstnDropdown（）}
您必须使用
onChangeBrstnDropdown
像我的答案或
onChange={（数据）=>onChangeBrstnDropdown（数据）}
。你不需要使用条件。好的，我遵循了你所做的。但是，当I console.log
outputObject
时，直接调用了
onChange
。我得到一个错误，它是未定义的。我尝试了选项2，因为它看起来更容易。然而，我得到了错误，因为我也是ecmascript的新手。const onchangebrstndroptown=（outputObject）=>{setOptionsBrstn（outputObject.value）}首先进入
onchangebrstndroptown
write
console.log（outputObject）
查看输出内容。（没有任何JSON.stringify）这是调用
onchangebrstndroptown
的正确方法吗
onChange={onChangeBrstnDropdown（）}
您必须使用
onChangeBrstnDropdown
像我的答案或
onChange={（数据）=>onChangeBrstnDropdown（数据）}
。你不需要使用条件。好的，我遵循了你所做的。但是，当I console.log
outputObject
时，直接调用了
onChange
。我得到一个错误，它是未定义的