Question

我使用django作为后端，并且大多数作为前端使用，例外是在reactjs中创建的一个表单。为了加快这个表单的加载，我想通过从html而不是使用请求来加载它来加载它的数据。 Django将在加载页面时发送数据和表单，并且不需要另一个请求。我设法获取数据，这是html，但我正在运行以下错误：

未捕获（在promise中）错误：对象作为React子对象无效（找到：[object HTMLOptionElement]）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查渲染方法

出于测试目的，我正在从另一个看起来像这样的表格中获取HTML：

<select name="tz" border="solid 1px #F6892D" id="id_tz">
  <option value="Africa/Abidjan">Africa/Abidjan</option>
  (...)
  <option value="" selected=""></option>
</select>

安装组件后会发生：

componentDidMount = () => {
    document.addEventListener("DOMContentLoaded",  (event) => { 
        var tz_options = document.getElementById('id_tz');
        this.setState({tz:Array.from(tz_options)});
    });
}

我还尝试通过添加toArray函数和安装createFragment插件来解决错误，但它没有帮助：

function toArray(obj) {
   var array = [];
   for (var i = obj.length >>> 0; i--;) { 
   console.log(obj[i].value)
   array[i] = createFragment(obj[i]);
   }
  return array;
}

这就是我试图呈现它的方式，它也是产生上述错误的地方：

                    <select 
                        value={this.state.value} 
                        className="form-control" 
                        id={this.props.id} 
                        ref={this.props.id} 
                        onChange={this.handleChange}>

                        {   
                            tz_options.map(function (item) {
                                x+=1;
                                if (item.value) {
                                    item.key = item.value;
                                } else {
                                    item.key = String(x);
                                }
                                    return item;                                   
                            })
                        }
                    </select>

Answer 1

您应该使用+(void)postSaveCoinOrder:(OrderSaveCoinOrderRequestModel *)model returnInfo:(void(^)(OrderSaveCoinOrderResponseModel* resModel))retMode;元素渲染select代表其子代：

option

将DOM元素插入React组件

1 个答案: