使用React js用datajson填充select

我正在尝试使用React js填充一个select，我正在使用React js docs（）上给出的示例，它使用jquery管理ajax调用，我无法使它工作，到目前为止，我有以下几点：

这里是代码笔：

//从源代码调用的json文件：[{“companycase_id”：“CTSPROD”，“name”：“CTS Production”}，{“companycase_id”：“CTSTESTING”，“name”：“CTS Testing”}]
//使用jquery进行ajax调用
var App=React.createClass({
getInitialState:函数（）{
返回{
选项：[]
};
},
componentDidMount:function（）{
变量源=”https://api.myjson.com/bins/3dbn8";
this.serverRequest=$.get（源、函数（结果）{
var arrTen=结果['']；
对于（var k=0；k<10.length；k++）{
arrTen.push（{ten[k].name}）；
}
}.约束（这个）；
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
{this.state.opts}
);
}
});
ReactDOM.render(
,
document.getElementById（'root'））
);

html

---

任何关于如何使其工作的想法，谢谢。

您需要调用setState来实际更新视图。这是一个可行的版本

//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc  ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
    return {
      opts:[]      
    };
},

componentDidMount: function() {
  var source="https://api.myjson.com/bins/3dbn8";
  this.serverRequest = $.get(source, function (result) {
    var arrTen = [];
    for (var k = 0; k < result.length; k++) {
        arrTen.push(<option key={result[k].companycase_id} value={result[k].companycase_id}> {result[k].name} </option>);
    }
    this.setState({
      opts: arrTen
    });
  }.bind(this));
},

  componentWillUnmount: function() {
  this.serverRequest.abort();
},

render: function() {
  return (
    <div>        
      <select id='select1'>
        {this.state.opts}
      </select>
    </div>
  );
 }
});

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

//从源代码调用的json文件：[{“companycase_id”：“CTSPROD”，“name”：“CTS Production”}，{“companycase_id”：“CTSTESTING”，“name”：“CTS Testing”}]
//使用jquery进行ajax调用
var App=React.createClass({
getInitialState:函数（）{
返回{
选项：[]
};
},
componentDidMount:function（）{
变量源=”https://api.myjson.com/bins/3dbn8";
this.serverRequest=$.get（源、函数（结果）{
var arrTen=[]；
for（var k=0；k

<div id="root"></div>

//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc  ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
    return {
      opts:[]      
    };
},

componentDidMount: function() {
  var source="https://api.myjson.com/bins/3dbn8";
  this.serverRequest = $.get(source, function (result) {
    var arrTen = [];
    for (var k = 0; k < result.length; k++) {
        arrTen.push(<option key={result[k].companycase_id} value={result[k].companycase_id}> {result[k].name} </option>);
    }
    this.setState({
      opts: arrTen
    });
  }.bind(this));
},

  componentWillUnmount: function() {
  this.serverRequest.abort();
},

render: function() {
  return (
    <div>        
      <select id='select1'>
        {this.state.opts}
      </select>
    </div>
  );
 }
});

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