ReactJS

Question

我浏览了很多帖子，觉得我可能遗漏了一些小东西。我有一个 jsonschema 表单，在组件 class 之前定义了几个下拉列表。为了填充它们，我在 componentDidMount 中使用提取并将 returned 值推送到下拉列表中的枚举。渲染后下拉列表为空白，但如果我单击另一个选项卡并 return，下拉列表将填充该值。我怎样才能让它在初始渲染时填充？下面的代码。

jsonschema:

const schema = {
  type: 'object',
  required: ['contextID'],
  properties: {
    contextID: { type: 'string', title: 'Context ID, enum: [], enumNames: [] }    
  }
}

componentDidMount 获取：

}).then(function(json) {
  this.setState({contextIDArray: json.List}, () => {
    schema.properties.contextID.enumNames.push(this.state.contextIDArray);
    schema.properties.contextID.enum.push(this.state.contextIDArray);
    console.log("SCHEMA:: ", schema.properties.contextID.enumNames);
  });
}.bind(this)).catch(() => {
  this.setState({
    value: 'no response - cb catch'
  })
})

Answer 1

如果您要更改组件中的对象，如果您希望 DOM 呈现该组件中的更改，则它需要是一个状态对象。创建一个状态对象，在构造函数中设置状态，然后在更新后将其作为道具传递给表单。

你的函数中有这样的东西：

}).then(function(json) {
 this.setState({contextIDArray: json.List}, () => {
 schema.properties.contextID.enumNames.push(this.state.contextIDArray);
schema.properties.contextID.enum.push(this.state.contextIDArray);
this.setState({schemaState: schema});
 });
}.bind(this)).catch(() => {
 this.setState({
   value: 'no response - cb catch'
 })
})

然后在你的渲染中：

render() {

    return (
        <div className="container">
            <Form
                schema={this.state.schemaState}
            />
        </div>
        )
      }

这将重新绘制 DOM。您的下拉列表应该更新。

ReactJS - 动态更新 jsonschema 下拉列表

ReactJS - dynamically update jsonschema dropdown

jsonschema

drop-down-menu

fetch-api