Невозможно добавить опции выбора входа реагирования

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> но только элемент TEST можно увидеть в элементе ввода input, но zzz больше нет.

Answer 1

Если у вас есть массив, вам не нужно создавать элементы вручную. Используйте ваше состояние в качестве источника для ваших элементов 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>

Answer 2

Вы возвращаете здесь строку вместо компонента реакции

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

Пытаться

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

это вернет компонент реагирования, который будет отображаться внутри вашего Input jsx.