Question

我更新的基于我的组件的状态进行选择。

的选项

的状态被初始设置为一个空数组但是一旦从API装载时，状态被更新，以便选项应该更新。

尽管确实发生了这种情况（并且可以在开发工具中看到），但似乎需要调用material_select来更新其外观。

我可以从控制台得到这个通过调用$（ “选择”）中正确显示。material_select（）。

我认为造成问题的线是在这里：https://github.com/react-materialize/react-materialize/blob/master/src/Input.js#L38

有没有一种方法，我可以手动调用此而我的组件里面？

请注意，我使用的是创建反应的应用程序内。

<Row>
  <Input
    id="categories"
    type="select"
    label="Categories"
    multiple={true}
    onChange={this.handleChange}
    s={12}
  >
    {this.state.categories.map(category => {
      return (
        <option key={category._id} value={category._id}>
          {category.name}
        </option>
      );
    })}
  </Input>
</Row>

Answer 1

一旦您的选项来自API，就可以通过呈现Input组件来解决问题。

您可以将状态初始化为null而不是空数组：

state = {
  categories: null;
}

因此，在您的render方法中，有条件地渲染组件（仅当选项可用时）：

render() {
    return (
      <Row>
        {this.state.categories ? (
          <Input
            id="categories"
            type="select"
            label="Categories"
            multiple={true}
            onChange={this.handleChange}
            s={12}
          >
            {this.state.categories.map(category => {
              return (
                <option key={category._id} value={category._id}>
                  {category.name}
                </option>
              )
            })}
          </Input>
        ) : null}
      </Row>
    )
}

所以选项不会出现从状态更新多选选项不会触发material_select

1 个答案: