Material-UI：重新渲染次数过多。布局不稳定。TextareaAutosize限制渲染次数以防止无限循环

Question

我有以下代码：

export function MyTextField({ onChange, defaultValue }) {
  return (
    <TextField
      defaultValue={defaultValue}
      onChange={(event) => {
        if (onChange) {
          onChange(event.target.value);
        } else {
          console.log("*no onChange function added*", event.target.value);
        }
      }}
    />
  );
}

//then I use MyTextField in another component

const [recommendations, setRecommendations] = useState(
   (appointment.recommendations) || ""
)
console.log(recommendations) // logs as expected with every onChange

<MyTextField
   defaultValue={recommendations}
   onChange={setRecommendations}
/>

发生 10 次或更多“onChange”后，我在控制台上收到此错误：

Material-UI: Too many re-renders. The layout is unstable.
TextareaAutosize limits the number of renders to prevent an infinite loop.

我读过其他建议我使用箭头函数的问题，但我认为我做得不对，因为错误仍然存​​在。

Answer 1

我遇到了类似的问题。就我而言， multiline={true}是导致此错误的原因。我发现以下两种方法可以消除该警告。

1. 放multiline={false}
2. if multiline={true}，则设置rows={some number} 为避免重新渲染除数据之外的元素本身。

Answer 2

我发现这个问题的答案实际上与您的代码实际进行更新无关。使用多行参数时，MUI 无法找到 TextField 的稳定尺寸，因为变量太多。

就我而言，它是一个文本字段，周围有几乎无限的空间；MUI 不知道输入是宽还是高！

所以我通过使用 fullWidth 参数修复了它；所以它被有效地限制在一个方向上。

我希望这对某人有帮助:)