React Select默认值选中问题

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
      value: ""
    };
  }
  componentDidMount() {
    // 模拟ajax调用，成功之后把需要改变的默认值赋值给this.state.value
    setTimeout(() => {
      this.setState({
        projects: [
          { id: 1, name: "花生" },
          { id: 2, name: "苹果" },
          { id: 3, name: "杨桃" }
        ],
        value: 1
      });
    }, 3000);
  }
  handleClick() {
    this.setState({
      projects: [
        { id: 4, name: "水果" },
        { id: 5, name: "西瓜" },
        { id: 6, name: "哈哈哈" }
      ],
      value: 4
    });
  }
  handleChange = e => {
    this.setState({
      value: e.target.value
    });
  };
  render() {
    let projects = this.state.projects;
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>异步拉取数据</button>
        {/* 这里不用再去判断project的长度是否大于0，在ajax里面做判断就行，如果小于零或者不存在它就是默认值 */}
        <select
          defaultValue=""
          value={this.state.value}
          onChange={this.handleChange}
        >
          {projects.length > 0 &&
            projects.map((item, i) => {
              return (
                <option key={i} value={item.id}>
                  {item.name}
                </option>
              );
            })}
        </select>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));