reactjs input select 选项无法添加

Question

您好，我正在尝试从后端获取选项列表，然后将它们映射到选项列表并添加到列表中，但失败了。有人可以请教一下吗？

父组件：

fetch(urlMakerNames)
.then((response) => response.json())
.then((responseJson) => {
    var array = JSON.parse(responseJson.marker_names);
    var options = array.map((opt, index) => {
        console.log('opt = ' + opt + ', index = ' + index);
        return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>';
    });

    console.log('BEFORE options = ' + options + ', markerNames = ' + this.state.markerNames);

    this.setState({
        markerNames: options
    });

    console.log('AFTER options = ' + options + ', markerNames = ' + this.state.markerNames);

}).catch((error) => {
    console.error("MarkerForm error = " + error);
});

子组件：

console.log('this.props.markerNames = ' + this.props.markerNames);
<FormGroup>
    <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required>
        <option key="12345" value="TEST">TEST</option>
        {this.props.markerNames}
    </Input>
</FormGroup>

日志显示：

opt = zzz, index = 0
BEFORE options = <option key="0" value="zzz">zzz</option>, markerNames = 
this.props.markerNames = <option key="0" value="zzz">zzz</option>
AFTER options = <option key="0" value="zzz">zzz</option>, markerNames = <option key="0" value="zzz">zzz</option>

从日志中可以看出，markerNames 以与 <option key="12345" value="TEST">TEST</option> 匹配的正确格式传递给子组件，但在输入 select 元素中只能看到 TEST 选项，但 zzz 消失了。

Answer 1

你return在这里输入字符串而不是反应组件

return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>';

尝试

return <option key={index} value={opt}>{opt}</option>;

这将 return 将在您的 Input jsx 中呈现的 React 组件。

Answer 2

有了数组后，就不需要手动创建元素了。通过在渲染函数中映射数组本身，将您的状态用作 JSX 元素的源。

试试这个：

fetch(urlMakerNames)
.then((response) => response.json())
.then((responseJson) => {
    var array = JSON.parse(responseJson.marker_names);

    this.setState({
        markerNames: array
    });

}).catch((error) => {
    console.error("MarkerForm error = " + error);
});



    <FormGroup>
        <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required>
            {this.props.markerNames.map((option, inx)=>{
              return <option key={inx} value={option}>{option}</option>;
            })}
        </Input>
    </FormGroup>

reactjs input select 选项无法添加

reactjs input select options cannot be added

javascript

reactjs

core-ui