React- Bootstrap FormControl select не получает отображаемое значение

Question

import { Form } from 'react-bootstrap'

const nameArray = [
    {
        "id": 52655,
        "firstName": "raj",
        "lastName": "",
        "primaryAddress": "sad"
    },
    {
        "id": 52656,
        "firstName": "SubbaRaju",
        "lastName": "ch",
        "primaryAddress": "kphb"
    },
    {
        "id": 52667,
        "firstName": "Ravi",
        "lastName": "Varma",
        "primaryAddress": "Hyderabad"
    }
]

export default class File extends Component {
    constructor(props) {
        super(props);
        this.state = {
            object: {
                name: "",id:0
            }
        }
    }

    nameChange = (value) => {
        console.log(value)
        for(let i=0 ; i < nameArray.length; i++){
            if(value = nameArray[i].id){
                this.state.object.name = nameArray[i].firstName
                this.state.object.id = nameArray[i].id
            }
        }
        this.setState({object:this.state.object})
    }

    render() {
        return (
            <div>
                <Form>
                    <Form.Group>
                        <Form.Label className="Font">Name</Form.Label>
                        <Form.Control
                            value={(this.state.object.name) ? this.state.object.name : -1}
                            onChange={(e) => this.nameChange(e.target.value)}
                            className="Inputstyle"
                            as="select"
                        >
                            <option disabled value={-1} key={-1}>select</option>
                            {nameArray.map(list =>
                                <option key={list.id} value={list.id}>{list.firstName}</option>)}
                        </Form.Control>
                    </Form.Group>
                </Form>
            </div>
        )
    }
}

1. Значение сохраняется в состоянии, но значение имени не отображается в форме выбора.
2. Если я пытаюсь изменить значение параметра на «list.firstname» Я получаю отображаемое значение, но функция onchange дает мне имя вместо id. Мне нужен идентификатор, чтобы получить точную выбранную запись.

Answer 1

В вашем коде есть несколько ошибок, рассмотрите исправленную версию:

const { Form } = ReactBootstrap,
      { Component } = React,
      { render } = ReactDOM

const nameArray = [{"id":52655,"firstName":"raj","lastName":"","primaryAddress":"sad"},{"id":52656,"firstName":"SubbaRaju","lastName":"ch","primaryAddress":"kphb"},{"id":52667,"firstName":"Ravi","lastName":"Varma","primaryAddress":"Hyderabad"}]

class File extends Component {
    constructor(props) {
        super(props);
        this.state = {
            object: {
                name:null, 
                id:null
            }
        }
      this.nameChange = this.nameChange.bind(this)
    }

    nameChange(value) {
        for(let i=0 ; i < nameArray.length; i++){
            if(value == nameArray[i].id){
                this.setState({object:{
                  name: nameArray[i].firstName, 
                  id: nameArray[i].id
                }})
                break
            }
        }
        
    }

    render() {
        return (
            <div>
                <Form>
                    <Form.Group>
                        <Form.Label className="Font">Name</Form.Label>
                        <Form.Control
                            value={this.state.object.id}
                            onChange={(e) => this.nameChange(e.target.value)}
                            className="Inputstyle"
                            as="select"
                        >
                            <option disabled selected value="" key={-1}>select</option>
                            {
                              nameArray.map(list => (
                                <option 
                                  key={list.id} 
                                  value={list.id}
                                  label={list.firstName}
                                />
                              ))
                            }
                        </Form.Control>
                    </Form.Group>
                </Form>
            </div>
        )
    }
}

render (<File />, document.getElementById('root'))

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>

Чтобы обернуть критические, что было исправлено:

• не рекомендуется использовать обозначение функции стрелки для определения класса метод
• вы использовали один = вместо == в if(... выражении
• вы пытались напрямую назначить this.state.object свойства внутри if(.. -тела, тогда как setState() предполагается, что
• вы использовали this.state.object.name как value, тогда как в структуре вашего объекта данных нет такого свойства