Autocomplete 的 `getOptionLabel` 方法返回 undefined 而不是 [] 的字符串答案

【问题标题】：The `getOptionLabel` method of Autocomplete returned undefined instead of a string for []Autocomplete 的 `getOptionLabel` 方法返回 undefined 而不是 [] 的字符串
【发布时间】：2022-02-28 14:15:36
【问题描述】：

我在创建故事书时遇到此错误The getOptionLabel method of Autocomplete returned undefined instead of a string for []，在初始加载时，搜索框上有未定义的值（请参见屏幕截图），控制台中出现The getOptionLabel method of Autocomplete returned undefined instead of a string for [] 的错误，当我开始输入时，我也收到此错误LocationSearch.js:202 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'findLocationByAddress') 如何解决此错误？请帮忙。

自动完成.js

const propTypes = {
   getOptionLabel: PropTypes.func,
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
}

const defaultProps = {
   getOptionLabel: () => {},
   onChange: () => {},
   value: [],
   
}
const LocationSearch = ({
   getOptionLabel,
   onChange,
   value,

}) => {
 const [options, setOptions] = useState([]);
 const onInputChangeHandler = (e, inputString, reason) => {
    const { data: searchLocation } = await getLocations({
        variables: {
           placeSearch: {
              address: inputString,
              },
           },
        });
    setOptions(searchLocation.findLocationByAddress || []);
  };

 <Autocomplete
    freeSolo={freeSolo}
    getOptionLabel={getOptionLabel}
    onInputChange={onInputChangeHandler}
    options={uniqBy(
      multiple
        ? [...options, ...value]
        : value
        ? [...options, value]
        : options,
      'name'
    )}
}

.storybooks/preview

const withThemeProvider = (Story, context) => {
  return (
    <StyledEngineProvider injectFirst>
      <MockedProvider>
        <Story {...context} />
      </MockedProvider>
    </StyledEngineProvider>
  );
};

export const decorators = [withThemeProvider];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  apolloClient: {
    MockedProvider,
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Autocomplete.stories.js

import AutoCompleteSearch from './AutoComplete';
import { GETLOCATIONNAME } from '../services/location.gql';
const argTypes = {
  options: {
    defaultValue: [
      { name: 'Usa' },
      { name: 'Russia' },
      { name: 'Japan' },
      { name: 'UK' },
    ],
    getOptionLabel:{
        defaultValue:(options)=>{
            return options.name
    }},
  },
}

const Template = (args) => <AutoCompleteSearch {...args} />;

export const AutoCompleteSearchBar = Template.bind({});

LocationSearchBar.parameters = {
    
    apolloClient: {
        mocks: [
          {
            request: {
              query: GETLOCATIONNAME,
              variables: {
                placeSearch: {
                  address: [],
                },
              },
            },
            result: {
                data:{
                    findLocationByAddress: {}
                }
            },
          }
        ],
      }
}

export default {
  argTypes,
  title: 'Inputs/Fields',
};

../services/location.gql

export const GETLOCATIONNAME = gql`
  query FindLocationByAddress($placeSearch: location!) {
    findLocationByAddress(placeSearch: $placeSearch) {
      name
      address {
        street1
        street2
        city
        state
        zipCode
        country
      }
    }
  }
`;

【问题讨论】：

getOptionLabel 函数长什么样？尝试在那里添加一个断点，看看它是否返回一个未定义的值
@MihályiZoltán 我刚刚更新了代码，请参阅
你的意思是getOptionLabel: () => {},？这个函数肯定会返回 undefined
那我该如何解决这个问题？
getOptionLabel 应该为您的选项返回一个标签。例如你有这样的对象：{ name: "John"}，然后是getOptionLabel = (option) => option.name。

标签： reactjs material-ui apollo storybook

【解决方案1】：

在Autocomplete.stories.js 中，argTypes 在options 对象内有getOptionLabel。它应该在顶层外面。

Autocomplete.stories.js

...
const argTypes = {
  options: {
    defaultValue: [
      { name: 'Usa' },
      { name: 'Russia' },
      { name: 'Japan' },
      { name: 'UK' },
    ],
  },
  getOptionLabel: {
      defaultValue: (options) => {
          return options.name
  }},
}
...

【讨论】：