如何从Material-UI中延迟选择组件的渲染 [英] How to defer rendering of select component from material-ui

问题描述

升级到@ material-ui/core 4.11.2之后，我收到有关选择组件的警告.发生这种情况是因为在渲染选择时数据不可用.

After upgrading to @material-ui/core 4.11.2, I got warnings with my select components. This is happens because data aren't available at the time I'm rendering the select.

您可以在github上看到我的问题: https://github.com/mui-org/material-ui/issues/24041

You can see my issue on github: https://github.com/mui-org/material-ui/issues/24041

要解决此问题，在呈现选择组件之前，需要提供语言.

To correct that, languages need to be available before rendering the select component.

现在，我想更正我的代码，但是我完全迷失了，我不知道该怎么做.

Now, I want to correct my code, but I'm totally lost, I don't know how to do that.

这是我的选择组件:

<FormControl>
  <InputLabel htmlFor="lang">
    {localStorage.getItem("lang")}
  </InputLabel>
  <Select
    value={localStorage.getItem("lang")}
    onChange={e => this.changeLng(e.target.value, i18n)}
    inputProps={{name: "lang", id: "lang"}}
    >
    {languages &&
      languages.map((item, index) => {
        return (
          <MenuItem key={index} value={item.value}>
            {item.name}
          </MenuItem>
        );
    })}
  </Select>
</FormControl>

在 componentWillMount()

getLanguages.refetch({}).then(({ data }) => {
  if (data) {
    let langData = data && data.getLanguages;
      this.setState({
        languages: langData
      });
    }
});

changeLng

changeLng = (e, i18n) => {
    let arr = ["fr", "en"];
    let langList = e;
    let { categoryInfo, staticPagesTerms, productsInfo,AdvancedFilter } = this.props;
    localStorage.setItem("lang", e);
    if(AdvancedFilter && AdvancedFilter !== undefined){
        this.props.AdvancedFiltersubmit({
          fieldChild: [],
          rangeFilter: []
        });
    }
    localStorage.setItem("langList", e);
    staticPagesTerms.refetch().then(({ data }) => {});
    productsInfo.refetch({ filter: {} }).then(({ data }) => {
    })

    if (e === "fr") {
      document.body.setAttribute("dir", "ltr");
      localStorage.setItem("ltr", "ltr");
    } else {
      if (!arr.includes(e)) {
        langList = "en";
        localStorage.setItem("langList", e);
      } else {
        //localStorage.getItem("lang")
      }
      document.body.setAttribute("dir", "ltr");
      localStorage.setItem("ltr", "ltr");
    }
    i18n.changeLanguage(langList);
    this.props.getRefetch({ variables: { categoryRefetch: true } });
  };

有什么办法解决这个问题吗?任何答案将不胜感激.预先谢谢你.

Any idea how to solve this? Any answers will be appreciated. Thank you in advance.

推荐答案

似乎@vigor akbar答案也不起作用，那么另一种方法是延迟整个< Select> 组件的渲染.提供一个演示< Select> 组件，直到获得语言的数据.然后，当语言可用时，则呈现所需的组件.

seems @vigor akbar answer is also not working, then another way is to delay the rendering of the whole <Select> component. Provide a demo <Select> component until you get the data of languages. And when languages is available then render that required component.

  <FormControl>
    <InputLabel htmlFor="lang">{localStorage.getItem("lang")}</InputLabel>
    {languages ? (
      <Select
        value={localStorage.getItem("lang")}
        onChange={(e) => this.changeLng(e.target.value, i18n)}
        inputProps={{ name: "lang", id: "lang" }}>
        {languages.map((item, index) => {
          return (
            <MenuItem key={index} value={item.value}>
              {item.name}
            </MenuItem>
          );
        })}
      </Select>
    ) : (
       // Default element shown unitl the 'languages' isn't loaded
      <Select value={"loading"} placeholder="Loading...">
        <MenuItem value="loading">Loading....</MenuItem>
      </Select>
    )}
  </FormControl>

这篇关于如何从Material-UI中延迟选择组件的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！