React-Bootstrap FormControl 選擇未顯示值

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。 我需要 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(...語句中使用了單個=而不是==
• 您試圖在if(.. -body, 而應該使用setState()直接分配this.state.object屬性
• 您使用this.state.object.name作為value ，而您的數據對象結構中沒有這樣的屬性