反应未选择的选择值

Question

我正在尝试创建一个select下拉列表，该onChange会更新表中的所有select下拉列表。

状态设置正确。但是，当我更改表中的任何选择时，该值不会保持选中状态（显示）。

它可以正确设置子选项和主选项的状态。它只是不显示所选选项。

    import React, { Component } from 'react';
    // import ReactDOM from 'react-dom';
    // import { Select } from 'element-react';

    import Select from 'react-select';
    import logo from './logo.svg';
    import './App.css';

    class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
        products: [],
        categories: [],
        filterText: '',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.masterCategoryChange = this.masterCategoryChange.bind(this);
    }

    handleFilterTextChange(filterText) {
        this.props.handleFilterTextChange(filterText)
        this.setState({
        filterText: filterText
        });
    }

    handleChange(product, index, e){
        product.category_id  = e.value;
        let selectValues = this.state.selectValues;
        selectValues[index] = e.value;
        this.setState({selectValues});
    }

    masterCategoryChange(e){
        let selectValues = this.state.selectValues;
        selectValues.forEach(function(sv, index) {
        selectValues[index] = e.value;
        });
        console.log(selectValues)
        this.setState({selectValues});
    }

    /* Inside your component */
    componentDidMount() {
        const apiRequest = url => fetch(url).then(response => response.json())

        const apiRequestProducts = () => {
            return apiRequest("http://docker.for.mac.localhost:4000/api/products?filter[limit]=5").then(function(response) {
                return response;
            });
        };

        const apiRequestCategories = () => {
            return apiRequest("http://docker.for.mac.localhost:4000/api/categories?filter[limit]=7").then(function(response) {
                return response;
            });
        };

        this.setState({loading: true});

        Promise.all([
            apiRequestProducts(),
            apiRequestCategories()
        ]).then(results => {
            var selectValues = [];
            for (var i=0; i < results[0].length; i++) {
                selectValues[i] = '';
            }
            this.setState({
                selectValues,
                products: results[0],
                categories: results[1],
                loading: false
            });
        }).catch(err => {
            console.log('Oops, something went wrong', err);
        });
    }

    render() {
        return (
        <div className="App">
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
            </header>
            <FilterableProductTable 
            masterCategoryChange={this.masterCategoryChange}
            handleChange={this.handleChange}
            products={this.state.products} 
            categories={this.state.categories}
            filterText={this.state.fliterText}
            categorySelectValues={this.state.selectValues}
            />
        </div>
        );
    }
    }

    class FilterableProductTable extends React.Component {
    constructor(props) {
        super(props);

        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.handleCategoryChange = this.handleCategoryChange.bind(this);
        this.handleMasterCategoryChange = this.handleMasterCategoryChange.bind(this);
    }

    handleFilterTextChange(filterText) {
        this.props.handleFilterTextChange(filterText)
    }

    handleCategoryChange(product, index, e){
        this.props.handleChange(product, index, e)
    }

    handleMasterCategoryChange(e){
        this.props.masterCategoryChange(e)
    }

    render() {
        return (
        <div>
            <SearchBar
            filterText={this.props.filterText}
            onFilterTextChange={this.handleFilterTextChange}
            />
            <ProductTable
            handleMasterCategoryChange={this.handleMasterCategoryChange}
            handleCategoryChange={this.handleCategoryChange}
            handleFilterTextChange={this.handleFilterTextChange}
            products={this.props.products}
            categories={this.props.categories}
            filterText={this.props.filterText}
            selectValues={this.props.categorySelectValues}
            />
        </div>
        );
    }
    }
    class ProductTable extends React.Component {
    constructor(props) {
        super(props);
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
        this.onProductCategoryChange = this.onProductCategoryChange.bind(this);
        this.masterCategoryChange = this.masterCategoryChange.bind(this);
    }

    handleClick = () => {
        console.log('this is:', this);
    }

    onProductCategoryChange(product, index, e){
        this.props.handleCategoryChange(product, index, e)

    }

    masterCategoryChange(e){
        this.props.handleMasterCategoryChange(e)
    }

    render() {
        console.log('Rendering');
        console.log(this.props.selectValues);

        let options = this.props.categories.map(function (category) {
        return { value: category.id, label: category.name };
        })
        console.log(options);

        let rows = this.props.products.map((product, i)=> {
        console.log(this.props.selectValues[i])
        return (
            <tr key={i}>
                <td>{product.name}</td>
                <td>{product.price}</td>
                <td><Select
                options={options} 
                value={this.props.selectValues[i]} 
                // value={product.category_id}
                onChange={this.onProductCategoryChange.bind(this, product, i)}
                /></td>
            </tr>
            )
        });

        return (
        // <h3>MasterCategory : {masterCategoryId}</h3> 
        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th><CategorySelect 
                onChange={this.masterCategoryChange.bind(this)}
                className='masterCategorySelect' 
                categories={this.props.categories}/></th>
            </tr>
            </thead>
            <tbody>{rows}</tbody>
            <tfoot>
            <tr>

                <td><div className='pull-right'><button onClick={this.handleClick}>Categorize</button></div></td>
            </tr>
            </tfoot>
        </table>
        );
    }
    }


    class CategorySelect extends React.Component {
    render() {
        let options = this.props.categories.map(function (category) {
        return { value: category.id, label: category.name };
        })

        return (
        <Select
            onChange={this.props.onChange}
            options={options} 
            // value={value}
        />
        );
    }
    }

    class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    }

    handleFilterTextChange(e) {
        this.props.onFilterTextChange(e.target.value);
    }

    render() {
        return (
        <form>
            <input
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            onChange={this.handleFilterTextChange}
            />
        </form>
        );
    }
    }


    export default App;