Javascript 通过post请求从react dual列表框发送所选选项

我试图在我的react应用程序中实现，在我的组件中实现两个react双列表框。此时，当组件装载时，在get请求之后，列表框会自动填充。我需要一些关于如何在每个双列表框中获取所选选项并将它们作为json数据发送到服务器的帮助。 我需要这些列表中的两个数组

这是我的双列表框类：

import React from 'react';
import DualListBox from 'react-dual-listbox';
import 'react-dual-listbox/lib/react-dual-listbox.css';
import 'font-awesome/css/font-awesome.min.css';

export class FirstList extends React.Component {
    state = {
        selected: [],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                canFilter
                filterPlaceholder={this.props.placeholder || 'Search From List 1...'}
                options={this.props.options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

export class SecondList extends React.Component {
    state = {
        selected: [],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                canFilter
                filterPlaceholder={this.props.placeholder || 'Search From List 2...'}
                options={this.props.options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

在我的组件中，我开始导入以下内容：

    import React, { useState, useEffect } from 'react'
        import LoadingSpinner from '../shared/ui-elements/LoadingSpinner';
        import ErrorModal from '../shared/ui-elements/ErrorModal';
        import { FirstList, SecondList } from '../shared/formElements/DualListBox';
        import { useHttpClient } from '../shared/hooks/http-hook';
        
        const MyComponent = () => {
        const { isLoading, error, sendRequest, clearError } = useHttpClient();
        const [loadedRecords, setLoadedRecords] = useState();
        
         useEffect(() => {
                const fetchRecords = async () => {
                    try {
                        const responseData = await sendRequest(
                            process.env.REACT_APP_BACKEND_URL + '/components/get'
                        );
                        setLoadedRecords(responseData)
                    } catch (err) { }
                };
                fetchRecords();
            }, [sendRequest]);
        
        ...
        
        ...
        
         return (
    <React.Fragment>
        <ErrorModal error={error} onClear={clearError} />
        <form>
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <fieldset name="SerialField" className="border p-4">
                            <legend className="scheduler-border"></legend>
                            <div className="container">
                                <p>SERIALS</p>
                                {loadedRecords ? (
                                    <FirstList id='Serials' options={loadedRecords.firstRecordsList} />
                                ) : (
                                        <div>
                                            <label>List is loading, please wait...</label>
                                            {isLoading && <LoadingSpinner />}
                                        </div>
                                    )}
                            </div>
                        </fieldset>
                    </div>
                    <div className="col-md-6">
                        <fieldset name="SystemsField" className="border p-4">
                            <legend className="scheduler-border"></legend>
                            <div className="container">
                                <p>SYSTEMS</p>
                                {loadedRecords ? (
                                    <SecondList options={loadedRecords.secondRecordsList} />
                                ) : (
                                        <div>
                                            <label>List is loading, please wait...</label>
                                            {isLoading && <LoadingSpinner />}
                                        </div>
                                    )}
                            </div>
                        </fieldset>
                    </div>

...

...

如果有人能指导我，我将不胜感激

提前谢谢

FirstList和SecondList正在使用内部状态显示所选值。由于父组件应该执行服务器请求，因此它需要访问此数据。这可以通过多种选择来实现：

让父组件MyComponent完全处理状态。FirstList和SecondList需要两个道具：一个用于当前选定的值，另一个用于onChange事件。MyComponent需要管理该状态。例如： 只提供onChange事件并跟踪它。这与第一种方法非常相似，但列表将在内部管理其状态，并且仅在通过onChange发生更改时通知父级。我通常不使用这种方法，因为我感觉我在两次管理某个东西的状态，而且我还需要知道两个*列表组件的初始状态，以确保始终正确地同步。 使用ref，在需要时从父级调用命令句柄。我不建议这样做，因为它通常不是这样做的，而且它越来越难在其他地方共享状态，而不是在严重耦合的组件内部。 使用外部共享状态，如Redux或Unstated。使用全局状态，当前状态可以在应用程序中的任何位置重用，甚至在用户单击“离开/卸载MyComponent”时可能存在。如果用户离开并返回组件，则不需要额外的服务器请求。无论如何，使用外部全局状态需要额外的设置，并且通常感觉太多，像是一个非常高端的解决方案，在这种特定情况下可能不需要。

---

通过使用选项1或2，当发生更改时，父组件会收到通知。在每次更改时，可能发送的服务器请求甚至可能被取消公告。或者有一个提交按钮，它有一个回调，将保存的状态发送到服务器。

我希望我没有误解这个问题，因为在我键入此答案时，问题被否决了。。。我把它理解为寻找一种通用方法，即当必要的状态由子组件处理时，如何实现某种效果。非常感谢@Narigo。我实现了您提到的第一个选项。它很好用。Best Regard我注意到duallistbox中有一个可用的道具，它是选项数组的子集，可以选择性地过滤可用的列表框。我也试图获取它们，但它返回未定义的值。有什么想法吗？对不起，我不明白你想在那里实现什么，以及你的代码现在是什么样子。有帮助吗？我在想，当右边的选项列表被填满时，是否有办法更新左边的选项列表。我需要向服务器发送信息，如果所有可用选项也被选中或未选中，而不仅仅是值。也许我找到了一个方法，但这是一个有点扭曲的方式。。。我只是在玩useState hook，但希望有一个简单的方法。似乎没有阅读文档

const MyComponent = () => {
  const [firstListSelected, setFirstListSelected] = useState();
  const [secondListSelected, setSecondListSelected] = useState();
  ...
  return (
    ...
    <FirstList options={...} selected={firstListSelected} onChange={setFirstListSelected} />
    ...
    <SecondList options={...} selected={secondListSelected} onChange={setSecondListSelected} />
    ...
  )