react-自动完成/文本字段不渲染由于最大更新深度超过?

Question

我的文本字段/自动完成字段没有在我的页面上呈现。我在它周围包装了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]，这至少应该有所帮助。