react- Autocomplete/Textfield 由于超过最大更新深度而不渲染？

Question

我的 textfield/autocomplete 字段没有在我的页面上呈现。我在它周围包裹了 react-hook-form 以帮助我控制表单。

这是我从控制台得到的错误：

index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Controller

这是我的自动完成表单，我似乎无法在其他线程上找到有关此的任何帮助，

            <form noValidate onSubmit={handleSubmit(data => setData(data))}>
              <Controller
                render={({ onChange, ...props }) => (
                  <Autocomplete
                    className={classes.container}
                    id="stock_list"
                    name="stock_list"
                    multiple
                    options={inputOptions.companies}
                    filterOptions={filterOptions}
                    filterSelectedOptions
                    getOptionLabel={(option) => option.symbol}
                    getOptionSelected={(option, value) => option.symbol === value.symbol}
                    renderOption={(option) =>
                    {
                      return (
                        <>
                          <span style={{ fontWeight: 500, fontSize: "20px", paddingRight: "1rem" }}>{option.symbol}</span><span style={{ color: "#C6C6C6", fontSize: "24px" }}> | </span><span style={{ paddingLeft: "1rem" }}>{option.company}</span>
                        </>
                      )
                    }}
                    renderInput={(params) => (
                      <TextField 
                        {...params}
                        style={{ alignItems: 'center' }}
                        id="stock_list"
                        name="stock_list"
                        variant="outlined"
                        label="Companies"
                        className={classes.container}
                        component={TextField}
                        />
                       )}
                      />
                    )}
                    name="stock_list"
                    onChange={([event, data]) => {
                      return data;
                    }}
                    control={control}
                    defaultValue=""             
                />
            </form>

我的 <Controller> <Autocomplete> 和/或 <TextField> 结构怎么弄错了？

编辑：这是我获取输入选项的方式

const [inputOptions, setInputOptions] = useState({ companies: [] });

  useEffect(() =>
  {
    Axios.get("https://app.stockbuckets.io/tickers/").then((res) =>
    {
      setInputOptions({ companies: res.data });
    });
  }, [setInputOptions]);

Answer 1

将 useEffect 中的依赖项数组更改为 [inputOptions] 而不是 [setInputOptions]，这至少应该有所帮助。

react- Autocomplete/Textfield 由于超过最大更新深度而不渲染？

react- Autocomplete/Textfield not rendering due to maximum update depth exceeded?

javascript

reactjs

material-ui

react-hook-form