BUG: Loading projects can return null

[zoltanbedi]

Opening this URL shows the following error

We should handle null in the ProjectSelector.tsx file when we load projects.

[Halsjsko]

可以让我帮你完成这个任务嘛

[zoltanbedi]

@Halsjsko please do. Let me know if you need help.

[Halsjsko]

你好我修改了一部分代码，但是它前面的import报错。找不到模块“@emotion/css”或其相应的类型声明，应该如何解决呀。

[Halsjsko]

你好，我提交了pr。但是显示 我不太清楚是什么回事。麻烦可以帮我一下嘛

[zoltanbedi]

@Halsjsko you need to sign our CLA (Contributor License Agreement) for us to be able to merge your PR. Click on the link and agree it.

[Halsjsko]

那这个CLA需要如何签署呢

[zoltanbedi]

Follow this link and click the big blue button at the bottom. https://cla-assistant.io/grafana/google-bigquery-datasource?pullRequest=302

[Halsjsko]

你好，我已经签署了这个协议。但刷新请求还是 这样。我是需要重新pr还是应该怎么办？

[zoltanbedi]

Your commit on your PR is not made with your user. https://docs.github.com/en/pull-requests/committing-changes-to-your-project/troubleshooting-commits/why-are-my-commits-linked-to-the-wrong-user

[Halsjsko]

你好，我先把大概的说一下，然后明天再弄pr可以吗，希望我的一些看法对你有用。无论有用还是错误，请都回复我一下好吗，谢谢。在 useEffect 中处理 null 值 目前在 useEffect 函数中，对 state.value 和 value 的使用存在潜在的 null 相关错误。以下是修改后的代码，添加了更完善的 null 检查： useEffect(() => { if (!applyDefault) { return; } // Set default project when values are fetched if (!value) { if (state.value && state.value.length > 0) { onChange(state.value[0]); } } else { if (state.value && state.value.find((v) => v.value === value) === undefined) { // if value is set and newly fetched values does not contain selected value if (state.value.length > 0) { onChange(state.value[0]); } } } }, [state.value, value, applyDefault, onChange]); 在上述修改中，当检查 state.value 的长度或访问其元素时，先确保 state.value 不为 null。 在 getErrorMessage 函数中处理 null 值 原 getErrorMessage 函数在访问 state.error 及其嵌套属性时没有充分考虑 null 值情况。以下是改进后的代码： const getErrorMessage = () => { if (!state.error) { return null; } const errorData = (state.error as any)?.data; if (errorData?.message) { const url = errorData.message.match(/(https?://[^ ]*)/g)?.[0]; return ( <> {errorData.message.split('.')[0]} {url? (

Click here to enable it

) : ( '' )} </> ); }

return state.error.message; }; 在这个修改后的函数中，首先检查 state.error 是否为 null，如果是则直接返回 null，避免后续可能出现的无法读取属性的问题。 在 Select 组件的 options 属性赋值中处理 null 值 原代码中 Select 组件的 options 属性赋值为 state.loading? [] : state.value || [{ label: value, value }]，这里存在当 state.value 为 null 时的潜在问题。以下是一种更安全的赋值方式： <Select aria-label="Project selector" inputId={inputId} value={state.loading? null : value} options={state.loading ? [] : state.value ? state.value.map((v) => ({ label: v.label, value: v.value })) : value ? [{ label: value, value }] : []} onChange={onChange} isLoading={state.loading} menuShouldPortal={true} /> 在上述修改后的代码中，当 state.value 为 null 时，根据 value 是否有值来确定 options 的赋值。如果 value 也为 null，则赋值为空数组 []，这样可以避免出现无法读取 null 属性的情况。

[zoltanbedi]

In my opinion, this can be fixed easily by doing this here https://github.com/grafana/google-bigquery-datasource/blob/main/src/components/ProjectSelector.tsx#L26

return projects?.map((project) => ({ label: project.displayName, value: project.projectId }));

This would make sure that we don't try to iterate over null.