如何正确显示材质UI本机选择并使用状态挂钩更改选择

Question

这里是代码沙箱https://codesandbox.io/s/wild-brook-jpeio?file=/src/App.js

我使用useEffect钩子获取一个值数组。数组变量是使用useState钩子设置的

本机选择的值和onChange属性还使用另一个状态变量及其设置函数来更新它。

使用下面的代码部分，使用set函数设置在使用效果获取数据之后本机选择的选定值。

 // set the default selection on first load
  if (!isEmpty(combolist)) {
    console.log(combolist[0].name);
    setSelection(combolist[0].name);
  }

但这会导致太多的渲染错误。

如何解决这个问题并实现我的目标

Answer 1

您需要使用一个use效应钩子来实现这一点：

  useEffect(() => {
    if (data.length) {
      const combolist = data.map((obj) => pick(obj, ["id", "name"]));

      // set the default selection on first load
      if (!isEmpty(combolist)) {
        console.log(combolist[0].name);
        setSelection(combolist[0].name);
      }
    }
  }, [data]);

Answer 2

一种简单的方法是在useffect中移动设置组合列表，以防止多次重新渲染这是解决方案链接。