ajax调用后选择框显示值不变

Question

我正在使用 react-final-form 来显示我的所有表单字段，但问题是当我尝试更改一个选择框值并在获得响应后通过 onChange 事件调用 ajax 时，我能够更改另一个选择框状态，但该显示选项仍然是旧的。

<Field name="primary_url" options={this.props.domainList} class="form-control">
  {({ input, meta, options }) => {
    return (
      <SelectboxPage
        options={options}
        name={input.name}
        className="form-control col-lg-6"
        value={this.props.primary_url}
        onChange={event => {
          this.props.displayPrimaryField(
            event.target.name,
            event.target.value,
            input,
            event
          );
        }}
      />
    );
  }}
</Field>

选择框页面

export const SelectboxPage = props => {
  return (
    <div>
      {props.options && props.options.length > 0 && (
        <select
          defaultValue={props.value}
          name={props.name}
          onChange={props.onChange}
          className={props.className}
        >
          <option value="">--- Select ---</option>
          {props.options.map(x => {
            return (
              <option key={x.value} value={x.value}>
                {x.display}
              </option>
            );
          })}
        </select>
      )}
    </div>
  );
}

谁能帮我解决上述问题。

Answer 1

请检查这个例子。希望对你有帮助。

import React from 'react';
import axios from 'axios';

export default class SelectExample extends React.Component {
    state = {
        selectedUserId: 0,
        posts: []
    };
    handleChange = (e) => {
        console.log(e);
        this.setState({selectedUserId: e.target.value});
        axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${e.target.value}`)
            .then(res => {
                console.log(res.data);
                this.setState({
                    posts: [{value: '', display: 'Select your post'}].concat(res.data)
                });
            })
    };

    render() {
        return (
            <div>
                <select value={this.state.selectedUserId} onChange={this.handleChange}>
                    <option value="0">Please Select User</option>
                    <option value="1">Leanne Graham</option>
                    <option value="2">Ervin Howell</option>
                    <option value="2">Clementine Bauch</option>
                    <option value="4">Patricia Lebsack</option>
                </select>
                <select>
                    {this.state.posts.map((post) => <option key={post.id}
                                                            value={post.id}>{post.title}</option>)}
                </select>
            </div>
        )
    }
}