Question

我似乎无法修复我在react应用上遇到的一些打字稿错误。

代码：

const [fetchJobTitlesCall, { data }] = useLazyQuery<Jobtitles, JobtitlesVariables>(JobTitlesQuery)
useEffect(() => {
    fetchJobTitlesCall({ variables: { keyword: 'Dev' } })
}, [fetchJobTitlesCall, data])

return (
            <Autocomplete
              onChange={(event, value) => dispatchJobTitlesFilter(value)}
              multiple
              id="tags-outlined"
              options={data?.jobTitles} // this line throwing error
              getOptionLabel={option => option.name + ` (${option.totalApplicants})`} // this line throwing error
              filterSelectedOptions
              renderInput={params => (
                <TextField
                  {...params}
                  onChange={event => fetchJobTitles(event.target.value)}
                  variant="outlined"
                  label="Search Job Title"
                  placeholder="Search Job Title"
                />
              )}
            />
)

错误：

输入'Jobtitles_jobTitles |未定义”无法分配给类型 '未知[]'。无法将类型'undefined'分配给类型'unknown []'。

有什么解决方法吗？

Answer 1

在没有看到Autocomplete的类型定义的情况下，很难准确说明，但是看起来options属性需要一个数组（类型未知）。例如：

type Options = unknown[];

这要求它始终是一个数组，甚至是一个空数组。以下代码不起作用：

let options: Options;
const data = { jobTitles: undefined };
options = data.jobTitles; // same error

您可以通过默认设置为空数组来解决此问题，以防未知jobTitles，例如：

options={data?.jobTitles || []}

但是，此行为可能是不确定的-您可能必须参考“自动完成”库本身才能查看如何正确处理此问题。

Answer 2

options组件上的Autocomplete属性期望道具的类型为unknown[]。您需要处理data?.jobTitles为undefined的情况。如果值未定义，则应该可以将其默认为一个空数组。

options={data?.jobTitles || []}

如何在React应用上解决打字稿错误

2 个答案: