使用异步数据时，材质UI自动完成功能显示“无选项”

如何解决使用异步数据时，材质UI自动完成功能显示“无选项”

我想点击一个API来填写我的自动填充的options。我使用useEffect进行此操作，可以看到响应中有一个数据数组，但不会显示在“自动完成”中。

如果我将解析的响应硬编码到JS数组中并将其粘贴到initialState对象中，则它将起作用。自动完成功能是否无法检测到状态变化或其他原因？我正在关注this example。

没有错误。控制台日志语句显示响应的已分析主体是可用数组。所以我不确定我在做什么错。

响应在被解析之前看起来像这样：

body: "[{"addressList":[{"address":"78 Pine Ave S","city":"Bend","province":"Oregon","postalCode":"89879","country":"USA"},{"address":"998 76 St S","postalCode":"86585","country":"USA"}],"emailList":["[e-mail]","[e-mail]"],"_id":"5f579f50f02ea700316058d7","firstName":"Billy Bob","lastName":"Johnson","alias":"BB-Dawg","__v":0},{"addressList":[],"emailList":[],...

我正在使用的状态以及效果：

const initialState = {
  contacts: [],};

useEffect(() => {
    let active = true;
    setState({ ...state,loading: true });
    const url = `${environment.api.contacts}/listAll`;

    (async () => {
      await axios.get(url)
        .then((response) => {
          const contacts = JSON.parse(response.data.body);
          console.log('got contacts:',contacts);
          setState({ ...state,contacts });
        })
        .catch((error) => {
          console.error('Error getting contacts:',error);
        })
        .then(() => setState({ ...state,loading: false }));
    })();

    return () => { active = false };
  },[]);

useEffect(() => {
    if (!state.open) setState({ ...state,contacts: [] });
  },[state.open]);

这是自动完成

<Autocomplete
              options={state.contacts}
              getOptionLabel={(contact: Contact) => getFullName(contact)}
              onChange={(event: any,contact: any) => { if (contact) handleContactChange(contact) }}
              renderInput={(params) => 
                <TextField
                  {...params}
                  label="Search for a Contact..."
                  variant="outlined"
                  InputProps={{
                    ...params.InputProps,style: {
                      height: 44,padding: '0 14px',},endAdornment: (
                      <InputAdornment position="end">
                        <Search />
                      </InputAdornment>
                    ),}}
                  InputLabelProps={{
                    ...params.InputLabelProps,...({ top: '-6px' }),}}
                />
              }
            />

解决方法

我使用了一个名为“isLoading”的状态来检查异步调用响应。最初它被设置为 false，一旦我得到响应，我就把它设置为 true。您可以按如下方式向自动完成框添加一些参数。

       <Autocomplete
          loading={isLoading}
          loadingText="Loading..."
          noOptionsText="No Options found"      
          options={state.contacts}
          getOptionLabel={(contact: Contact) => getFullName(contact)}
          onChange={(event: any,contact: any) => { if (contact) handleContactChange(contact) }}
          renderInput={(params) => 
            <TextField
              {...params}
              label="Search for a Contact..."
              variant="outlined"
              InputProps={{
                ...params.InputProps,style: {
                  height: 44,padding: '0 14px',},endAdornment: (
                  <InputAdornment position="end">
                    <Search />
                  </InputAdornment>
                ),}}
              InputLabelProps={{
                ...params.InputLabelProps,...({ top: '-6px' }),}}
            />
          }
        />

从 API 调用获得响应后，将 isLoading 设置为 false。