Question

我正在尝试根据API的接收值显示特定字段。我通过类别组件中的onChange事件使用自定义函数（getAttributeForProductCategory）调用API。

使用AOR的1.2.3版本重新渲染视图并且一切正常。当我将项目升级到1.3.0时，视图似乎没有重新渲染。我在changelog中没有看到任何可能导致这种情况的内容。你有什么想法吗？

以下是我用来执行此操作的代码：

export class ProductCreate extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      product_attributes: [],
      isLoadingAttributes: true,
    };
  }

  componentDidMount () {
    restClient(GET_MANY, 'attribute', {
      sort: { field: 'title', order: 'ASC' },
    })
      .then(response => {
        this.setState({
          product_attributes: response.data,
        });
      });
  }

  getAttributeForProductCategory (categoryId) {
    restClient(GET_MANY_REFERENCE, "attribute_category", {
      pagination: { page: 1, perPage: 5 },
      sort: { field: "title", order: "ASC" },
      target: "category_id",
      id: categoryId,
    }).then(response => {
      this.setState({
        product_attributes: response.data,
        isLoadingAttributes: false,
      });
    });
  }

  render () {
    return (
      <div>
        {
          <Create {...this.props}>
            <TabbedForm>
              <FormTab label="Infos">
                <SelectInput label="Site" source="site_id" choices={site} style={{ display: 'inline-block' }} validate={required} />
                <ReferenceInput
                  label="Catégorie"
                  source="category_id"
                  onChange={(e, v) => this.getAttributeForProductCategory(v)}
                  reference="category"
                  perPage="200"
                  style={{ display: 'inline-block', marginLeft: 32 }}
                  allowEmpty>
                  <SelectInput optionText="formatted_title" />
                </ReferenceInput>

              </FormTab>
              <FormTab label="Attributs">
                {
                  this.state.isLoadingAttributes
                  ?
                  <div style={{ marginTop: 32 }}> Selectionner une catégorie pour ce produit. </div>
                  :
                    Object.keys(this.state.product_attributes).map(key => {
                      const attribute = this.state.product_attributes[key];

                      switch (attribute.type) {
                        case "text":
                          return (
                            <TextInput
                              key={key}
                              source={`product_attributes[${key}].value`}
                              label={attribute.title}
                            />);
                        case "select":
                          return (
                            <SelectInput
                              key={key}
                              label={attribute.title}
                              source={`product_attributes[${key}].value`}
                              optionValue="id"
                              optionText="title"
                              choices={attribute.values}
                            />);
                        case "boolean":
                          return (
                            <BooleanInput
                              key={key}
                              source={`product_attributes[${key}].value`}
                              options={{ labelPosition: "right" }}
                              label={attribute.title}
                            />);
                        case "richtext":
                          return (
                            <RichTextInput
                              key={key}
                              source={`product_attributes[${key}].value`}
                              label={attribute.title}
                            />);
                        default:
                          return null;
                      }
                    })
                }
              </FormTab>
              <FormTab label="Images">
                <ImageInput multiple={true} source="images" label="Image" accept="image/*" placeholder={<p>Déposer vos images ici</p>}>
                  <ImageField source="url" />
                </ImageInput>
              </FormTab>
            </TabbedForm>
          </Create>
        }
      </div>
    );
  }
}

Answer 1

他们添加了WithPermissionsFilteredChildren，它在mount上添加子项但在componentWillReceiveProps上没有更新。

我想修复是将一个componentWillReceiveProps方法添加到WithPermissionsFilteredChildren。

https://github.com/marmelab/admin-on-rest/issues/1144

组件似乎没有重新渲染

1 个答案: