Reactjs 使用react.js获取所选下拉列表值

我正在尝试获取所选下拉选项的值，但我遇到了问题。。。下面的代码给出了此错误消息

错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

&这就是UI的样子，任何反馈都将不胜感激！谢谢大家!

---

您正在调用this.handleDropdownChange，直接在函数内部设置状态，因此它进入无限循环

使用内联箭头函数。此外，在onChange中，您传递的是不正确的

this.searchByOptions

。相反，您需要传递表单库在onChange中提供的所选内容

像这样

onChange={（selectedOption）=>this.handleDropdownChange（selectedOption）}


import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS } from '../../actions/keys';
import { users } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';

import {
    LumosTheme,
    Grid, Form, Icon, Container, Loader
} from '@customeLibrary/core';

class SearchBar extends Component { 
    state = {
        responseData: " ",
        handle: true,
        query: "",
        filterValues: [],
        optionSelected:null, // Initializing this value so I could track the selected dropdown option 
    };

    searchString = this.state.query;
    responseData = this.props.Users.data;

    componentDidMount() {
        this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users).then(() => {
            return this.setState({
                handle: false
            })
        })
    }
    handleInputChange = (value) => {
        console.log("In HandleInputFunction, Value= ", value)
        this.setState({ query: value }, () => {
            console.log("In HandleInputFunction, query= ", this.state.query)
            this.filterArray();
        }
        )
    }
    filterArray = () => {
        let searchString = this.state.query;
        let responseData = this.props.Users.data;


        if (searchString.length > 0) {
            const filterData = _.filter(responseData, (v) => v.first_name.includes(searchString) ||v.last_name.includes(searchString) || v.number.includes(searchString) );    
            this.setState({
                filterValues: filterData
            })
        }

    }

    searchByOptions = [
        { label: 'Name or Number', value: 'NAME/NUMBER' },
        { label: 'Distribution List', value: 'DL' },
        { label: 'Database Schema or Table', value: 'DB' },
        { label: 'Role', value: 'Role' }
    ];

    handleDropdownChange= (value) => {
        // Here I want to fetch whatever dropdown option the user selected
        this.setState({
                optionSelected: value
            })
        }
    render() {
        if (this.state.handle) {
            return <Loader />
        }
        else {
            return (
                <LumosTheme>
                    <Container width='1379px'>
                        &nbsp;&nbsp;
                    </Container>
                    <Container width='1379px'>
                        <Grid paddingTop='10px'>
                            <Form.Item width='380px'>
                                <Form.Dropdown
                                    // I'm having trouble fetching the value of the selected dropdown option and sending it to the 'handleDropdownChange' function
                                    options={this.searchByOptions}
                                    onChange={this.handleDropdownChange(this.searchByOptions)}
                                    defaultOption={this.searchByOptions[0]}
                                />
                            </Form.Item>
                        </Grid>

                        <Grid flexWrap="wrap" width='1000px'>
                            &nbsp;
                            < Form.SearchBox placeholder='Search' icon={<Icon.SearchRounded />}
                                userSelectOnClick
                                openOnClick
                                onSearch={this.handleInputChange}
                                value={this.state.query}
                            >
                                <Form.SearchList>
                                {this.state.responseData ?
                                    this.state.filterValues.map(item => (
                                        <Form.SearchOption
                                            label={[item.first_name+' '+item.last_name+' '+item.number]}
                                            value={[item.first_name,' ', item.last_name,' ', item.number]}
                                            key={[item.first_name,' ', item.last_name,' ', item.number]}
                                        />
                                    )):'null'}
                                </Form.SearchList>
                            </ Form.SearchBox>
                        </Grid>
                    </Container>
                </LumosTheme>
            )
        }
    }
}
const mapStateToProps = state => {

    return {
        Users: state.users,
    }
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar);

const Example = () => {
  const [shippingSpeed, setShippingSpeed] = React.useState(null);
  const shippingOptions = [
    { label: 'Fast (1 - 2 Days)', value: 'fastShipping' },
    { label: 'Normal (3 - 5 Days)', value: 'normalShipping' },
    { label: 'Slow (5 - 7 Days)', value: 'slowShipping' }
  ];

  return (
    <Form.Item htmlFor="shipping" id="shipping" label="Shipping Speed">
      <Form.Dropdown
        aria-label="Shipping speed"
        buttonLabel="Choose shipping Speed"
        onChange={selectedSpeed => {
          setShippingSpeed(selectedSpeed);
        }}
        options={shippingOptions}
      />
      <Typography kind="body1" mt={2}>
        <strong>Shipping speed:</strong> {shippingSpeed || 'Not selected'}
      </Typography>
    </Form.Item>
  );
};