Question

我有2个Select DropDownlist，我用一个API填充它们。必须为第一个下拉菜单的选定值连接它们。然后针对该值，我进行了第二次API调用，并填充了第二个列表。我的数据可能非常庞大，所以我无法合并两个API。

// First DropDownList 

{['tablename'].map(key => (
    <Select
        size="large"
        showSearch
        style={{width: '100%'}}
        placeholder="placeholder"
        optionFilterProp="children"
        onChange={() => {
            this.fillSegments(e);
        }}
        filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}>
        {this.state.tablename.map(({[key]: value}) =>
            <Select.Option key={value} value={value}>{value}</Select.Option>)}
    </Select>
))}

// 2nd DropDownlist
{['segments'].map(key => (
    <Select
        size="large"
        showSearch
        style={{width: '100%', marginTop: 16, borderRadius: 0}}
        placeholder="placeholder2"
        optionFilterProp="children"
        onChange={() => {
        }}
        filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}
    >
        {this.state.segments.map(({[key]: value}) =>
            <Select.Option key={value} value={value}>{value}</Select.Option>)}
    </Select>
))}

填充方法：

fillsegments:
fillSegments(survey_title) {
    fetch('URL', {
        method: 'POST',
        body: JSON.stringify({
            "survey_title": survey_title
        }),
        headers: new Headers({
            "Authorization": "Bearer " + this.state.tkid,
            "Content-Type": "application/json",
        })
    })
        .then(results => results.json())
        .then(data => this.setState({
            segments: data,
        }));
}

这是第一个下拉列表：

fetch('URL', {
method: 'POST',
body: JSON.stringify({
    companyname: companyName
}),
headers: new Headers({
    "Authorization": "Bearer " + this.props.tkid,
    "Content-Type": "application/json",
})
})
.then(results => results.json())
.then(data => this.setState({
    tablename: data,
}));

无论如何，这些都是我的代码，我的问题是，当我选择第一个下拉列表后，由于setStates()而重新渲染了组件，并且我所有的 选择值 不见了。我尝试了shouldcomponentUpdate，但它并未填充我的第二个Dropdownlist，这意味着我的值并未显示为空。

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.segments !== nextState.segments) {
        return false
    }
    return true
}

那么有什么解决办法吗？

如何将2个下拉列表与React中的状态相互连接

0 个答案: