ReactJS-JavaScript-HTML：如何在选择后更新下拉菜单

问题：选择后如何更新下拉菜单

对不起，如果这个问题很简单，但我一直在尝试许多不同的方法，使它的工作。 我正在使用创建一个船可视化工具。查询API后，我能够获得一个json文件，其中包含我感兴趣的容器，并将这些容器注入表中，并在

谷歌地图上显示它们的标记。
现在，一些船只执行一些功能，其他船只执行一些其他功能，我正在尝试使用
下拉菜单对其进行过滤

下面是代码中最重要的部分：

谷歌地图.js：

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: []
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    componentDidMount() {
        this.countDownInterval = setInterval(() => {
            if (!this.state.buttonClickedAt) return;
            const date = new Date();
            const diff = Math.floor((date.getTime() - this.state.buttonClickedAt.getTime()) / 1000);

            if (diff < 90) {
                this.setState({
                    progress: diff,
                    buttonEnabled: false
                });
            } else {
                this.setState({
                    progress: 0,
                    buttonClickedAt: null,
                    buttonEnabled: true
                });
            }
        }, 500);
    }

    componentWillUnmount() {
        clearInterval(this.countdownInterval);
    }

    async updateRequest() {
        const url = 'http://localhost:3001/hello';
        console.log(url);
        const fetchingData = await fetch(url);
        const ships = await fetchingData.json();

        console.log(ships);

        this.setState({
            buttonEnabled: false,
            buttonClickedAt: new Date(),
            progress: 0,
            ships
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
// This will render the customized marker on Google-Map
                    {this.state.ships.map((ship) => (
                        <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} />
                    ))}
// This is the dropdown I am trying to update
                    <select className="combo-companies">
                        <option value="All">All</option>
                        <option value="research">research</option>
                        <option value="exploration">exploration</option>
                        <option value="navigation">navigation</option>
                        <option value="drilling">drilling</option>
                    </select>
                </GoogleMapReact>
            </div>
        );
    }
}

class BoatMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
按钮启用：正确，
buttonClickedAt:null，
进展：0，
船舶：[]
};
this.updateRequest=this.updateRequest.bind（this）；
this.countDownInterval=null；
}
componentDidMount（）{
this.countDownInterval=setInterval（（）=>{
如果（！this.state.buttonClickedAt）返回；
const date=新日期（）；
const diff=Math.floor（（date.getTime（）-this.state.buttonClickedAt.getTime（））/1000）；
如果（差值<90）{
这是我的国家({
进展：差异，
按钮启用：false
});
}否则{
这是我的国家({
进展：0，
buttonClickedAt:null，
按钮启用：正确
});
}
}, 500);
}
组件将卸载（）{
clearInterval（此为倒计时间隔）；
}
异步更新请求（）{
常量url=http://localhost:3001/hello';
console.log（url）；
const fetchingData=等待获取（url）；
const ships=await fetchingData.json（）；
控制台.日志（船舶）；
这是我的国家({
按钮启用：false，
buttonClickedAt:新日期（），
进展：0，
船舶
});
设置超时（（）=>{
this.setState（{buttonEnabled:true}）；
});
}
render（）{
返回(
//这将在Google地图上呈现自定义标记
{this.state.ships.map（（ship）=>(
))}
//这是我试图更新的下拉列表
全部的
研究
探索
航行
钻孔
);
}
}

ShipTracker.js

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    const shipImage = companyImageMap[company];
    return (
        <div>
            {/* Render shipImage image */}
            <img src={shipImage} alt="Logo" />
        </div>
    );
};
export { Ship };

const ShipTracker = ({ ships }) => {
    const handleRowClick = (rowValue) => {
        console.log(rowValue);
    };
    return (
        <div className="ship-tracker">
            <Table className="flags-table" responsive hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Callsign</th>
                        <th>Heading</th>
                        <th>SOG</th>
                        <th>IMO</th>
                        <th>MMSI</th>
                        <th>Longitude</th>
                        <th>Latitudee</th>
                    </tr>
                </thead>
                <tbody>
                    {ships.map((ship, index) => {
                        const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                        const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
                        return (
                            <tr onClick={() => handleRowClick(ship)} key={index}>
                                <th scope="row">{index}</th>
                                {cells.map((cell) => <td>{cell}</td>)}
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );
};

export default ShipTracker;

const Ship=（{Ship}）=>{
const shipName=ship.NAME；
const company=船舶公司映射[船舶名称]；
const shipImage=公司图像映射[公司]；
返回(
{/*渲染shipImage图像*/}
);
};
出口{Ship}；
const ShipTracker=（{ships}）=>{
常量handleRowClick=（行值）=>{
console.log（rowValue）；
};
返回(
#
名称
呼号
标题
索格
依我所见
MMSI
经度
拉蒂图迪
{ships.map（（ship，index）=>{
常量{IMO，名称，呼号，航向，SOG，MMSI，经度，纬度}=船舶；
常量单元格=[名称、呼号、标题、SOG、IMO、MMSI、经度、纬度]；
返回(
HandlerRowClick（ship）}键={index}>
{index}
{cells.map（（cell）=>{cell}）
);
})}
);
};
导出默认ShipTracker；

到目前为止我所做的：

1） 在调查之后，我发现这对理解选择背后的概念很有用。这个问题仍然没有得到回答，我们想知道是否需要实现函数
组件将挂载
和
组件将接收道具
，或者是否有其他方法

2） 也很有用，但让我有点困惑，因为似乎需要
setState
作为实现的附加函数

3） 似乎必须在处理函数中提供
响应。
虽然有用，但我认为这篇文章是第1点+2点的总和

我知道这是一个简单的例子，但我试图理解如何更新简单的
下拉列表的基本概念，然后再转到更中级或更高级的内容。
感谢您为解决此问题指明了正确的方向。
好的，因此您希望根据用户在下拉列表中选择的选项过滤地图上显示的制造商

您可以根据需要更改
类型的名称。其中一个下拉值（全部、研究、勘探、导航或钻探）的类型

我还没有测试以下代码，但它应该可以工作

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All'
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.type !== prevState.type) {
            // The user has selected a different value from the dropdown
            // To get this value: this.state.type
            // do anything you want here...
            console.log('dropdown value changed for ' + this.state.type);
        }
    }

    handleChange = e => {
        this.setState({
            type: e.target.value
        });
    };

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{key: 'My_KEY'}}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
                    {this.state.ships.filter(ship => ship.type === this.state.type).map((ship) => (
                        <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE}/>
                    ))}

                    <select className="combo-companies" value={this.state.type} onChange={this.handleChange}>
                        <option value="All">All</option>
                        <option value="research">research</option>
                        <option value="exploration">exploration</option>
                        <option value="navigation">navigation</option>
                        <option value="drilling">drilling</option>
                    </select>
                </GoogleMapReact>
            </div>
        );
    }
}

class BoatMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
按钮启用：正确，
buttonClickedAt:null，
进展：0，
船舶：[]，
键入：“全部”
};
this.updateRequest=this.updateRequest.bind（this）；
this.countDownInterval=null；
}
componentDidUpdate（prevProps、prevState）{
如果（this.state.type！==prevStat
filter(ship => ship.type === this.state.type)

render() {
    // All the ships
    const ships = this.state.ships;

    // Debug
    console.log('this.state.type: ' + this.state.type);

    // Only the ships matching the dropdown selected value
    const filteredShips = ships.filter(ship => {
        console.log('ship.shipImage: ' + ship.shipImage);

        if (ship.shipImage !== this.state.type) {
            console.log('ship.shipImage does not match the filtered value');
        }

        return ship.shipImage === this.state.type;
    });

    // Debug
    console.log(ships);
    console.log(filteredShips);

    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{key: 'My_KEY'}}
                center={{
                    lat: 42.4,
                    lng: -71.1
                }}
                zoom={8}
            >
                {filteredShips.map((ship) => (
                    <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE}/>
                ))}

                <select className="combo-companies" value={this.state.type} onChange={this.handleChange}>
                    <option value="All">All</option>
                    <option value="research">research</option>
                    <option value="exploration">exploration</option>
                    <option value="navigation">navigation</option>
                    <option value="drilling">drilling</option>
                </select>
            </GoogleMapReact>
        </div>
    );
}