如何正确显示 Material UI Native 选择并使用状态挂钩更改选择

Question

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

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

Native Select 的 value 和 onChange 属性也使用另一个状态变量及其 set 函数来更新它。

在useEffect获取数据后，使用下面部分代码使用set函数设置Native Select的选择值。

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

但这会导致渲染错误过多。

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

Answer 1

您需要像这样使用useEffect 钩子：

  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

一种简单的方法是将combolist 的集合移动到useEffect 中，以防止多次重新渲染。

这是solution link。