选择的值不会显示在异步模式

Question

我有一个反应选择，我正在异步填充。项目显示正常但是，在选择项目后，列表将恢复为正在加载...，微调器开始旋转，选择框中不显示任何内容。

我只能猜测所选的值没有被持久化？不确定。 autocompleteLoad（）中的Complete = true无效。设置isLoading = false没有任何影响。这是代码......

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import * as models from '../models'
import Select from 'react-select'
import 'react-select/dist/react-select.css'

interface MovieActorState {
actor: models.Actor[]
loading: boolean
activeMovieId: number
activeActorId: number
acLoading: boolean,
acLabel?: string
}

const data = [{ value: 1, label: 'Mr Holland\'s Opus' },
{ value: 2, label: 'Braveheart' },
{ value: 3, label: 'Batman Forever' },
{ value: 1004, label: 'Star Wars' },
{ value: 1005, label: 'Goonies' },
{ value: 1006, label: 'ET' }];

const actors = [{ Id: 1, Name: 'Mel Gibson', Gender: 'Male', Age: 54, Picture: null },
{ Id: 2, Name: 'Val Kilmar', Gender: 'Male', Age: 49, Picture: null },
{ Id: 3, Name: 'Micheal Keaton', Gender: 'Male', Age: 60, Picture: null },
{ Id: 1002, Name: 'Diane Keaton', Gender: 'Female', Age: 49, Picture: null },
{ Id: 1003, Name: 'Tom Cruise', Gender: 'Male', Age: 55, Picture: null },
{ Id: 1006, Name: 'Richard Simmons', Gender: 'Male', Age: 59, Picture: null }];

const movieactors = [{ MovieId: 1, ActorId: 1 },
{ MovieId: 1, ActorId: 2 },
{ MovieId: 1, ActorId: 3 }];

export class Test extends React.Component<RouteComponentProps<{}>, MovieActorState> {
constructor(props) {
    super(props);
    this.that = this;
    this.state = {
        actor: [],
        loading: true,
        activeMovieId: 0,
        activeActorId: 0,
        acLoading: false
    };
    console.log('movieactor.fetch()', this.state)
    this.setState({
        actor: actors,
        loading: false,
    });
}

that;

public render() {
    console.log('movieactor.render', this.state)
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : this.renderTable(this.state.actor, true);
    return <div>
        <h1>MovieActor</h1>
        <label>Movie</label>
        <Select.Async
            name="form-field-name"
            loadOptions={this.autocompleteLoad}
            valueKey="value"
            labelKey="label"
            onChange={this.autocompleteSelect.bind(this)}
            placeholder="Type to search"
            value={this.state.activeMovieId + ''}
            isLoading={false}
            onClose={this.autocompleteClose.bind(this)}
        /><br />
        {contents}
    </div>;
}

autocompleteSelect(e) {
    console.log('movieactor.autocompleteSelect()', e, this.state)
    this.setState({
        actor: actors.filter((actor) => {
            return (actor.Id > e.value);
        }),
        loading: false,
        activeMovieId: e.value,
        acLoading: false,
        acLabel: e.label
    });
}

autocompleteClose(e) {
    console.log('movieactor.autocompleteClose()', e, this.state)
    this.setState({ acLoading: false });
}

autocompleteLoad(input, callback) {
    console.log('autocompleteLoad(' + input + ')')
    if (input == null || input.length == 0) {
        console.log('null')
        callback(null, { complete: true })
        return;
    }
    callback(null, {
        options: data, complete: true
    })
};

private renderTable(actor: models.Actor[], allowSort: boolean = false) {
    let headings = this.renderTableHeadings(allowSort)
    return <table className='table'>
        <thead>
            {headings}
        </thead>
        <tbody>
            {actor.map(item =>
                <tr key={item.Id}>
                    <td>
                    </td>
                    <td>{item.Id}</td>
                    <td>{item.Name}</td>
                    <td>{item.Gender}</td>
                    <td>{item.Age}</td>
                    <td>{item.Picture}</td>
                </tr>
            )}
        </tbody>
    </table>;
}

private renderTableHeadings(allowSort: boolean) {
    return <tr>
        <th></th>
        <th>Id</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
        <th>Picture</th>
    </tr>
}
}

更新：在我正在努力使其工作的过程中，似乎缺少值的隐藏输入。根据react-select文档：

..但是当我检查dom（选择项目后）它不在那里......

在我用其他东西替换组件之前，我将再给这一天。

Answer 1

代码工作正常，

请检查 WORKING DEMO ，可能还有一些其他代码会影响问题。