Javascript 在呈现React Native之前检查值是否未定义

我使用（）来显示从api调用中获得的数据的类别。我正在等待api获取数据，然后计划显示类别。问题是，我需要首先重新格式化数据，并在渲染之前使用挂钩，但我无法正确获得它

选择器的数据看起来如何：

items={[
    {label: 'USA', value: 'usa'},
    {label: 'UK', value: 'uk'},
    {label: 'France', value: 'france'/>},
]}

我的钩子：

    const [country, setCountry] = useState("0");
    const [categoryData, setCategoryData] = useState();
    const [testingCategories, setTestingCategories] = useState({
        label: null,
        value: null,
    });

我的效果挂钩并重新格式化数据：

//this hook calls api and sets the data to categories data of my type
useEffect(() => {
    getData(api.API_GET_DEPS, setIsLoading, setCategoryData);
}, []);

//this hooks reformats the data into acceptable format for picker
useEffect(() => {
    setTestingCategories(
        categoryData
            ? categoryData.map((item) => ({
                    label: item.DEPNAME, //label
                    value: item.DEPID,   //value
              }))
            : [{ label: null, value: null }]
    );
}, [categoryData]);

“我的渲染”下拉列表：

<View style={styles.container}>
                    {testingCategories ? (
                        <DropDownPicker
                            dropDownMaxHeight={300}
                            placeholder="All"
                            defaultValue={country}
                            items={testingCategories}
                            containerStyle={{ height: 50 }}
                            style={{ backgroundColor: "#fafafa" }}
                            itemStyle={{
                                justifyContent: "flex-start",
                            }}
                            dropDownStyle={{ backgroundColor: "#fafafa" }}
                            onChangeItem={(item) => {
                                console.log("changed");
                            }}
                            onOpen={() => setContainerOpacity(0.1)}
                            onClose={() => setContainerOpacity(1)}
                            labelStyle={{
                                fontSize: 16,
                                color: colors.dark,
                                fontWeight: "600",
                            }}
                            arrowSize={25}
                            arrowColor={colors.dark}
                        />
                    ) : (
                        <></>
                    )}

{测试类别(
{
控制台日志（“更改”）；
}}
onOpen={（）=>SetContainerCapacity（0.1）}
onClose={（）=>SetContainerCapacity（1）}
标签样式={{
尺寸：16，
颜色：颜色，
重量：“600”，
}}
箭头大小={25}
arrowColor={colors.dark}
/>
) : (
)}

---

我得到一个错误，下拉选择器无法将

defaultValue

与testingCategories中的任何标签匹配，因为它为空且尚未加载。我想我使用setter是错误的，因为我无法检查

testingCategories

的第一个元素是否已加载。我做错了什么？

您的

useState

定义与以后使用

settingCategories

的位置之间存在键入不匹配

在

useState

中，将初始值定义为单个对象：

useState({
        label: null,
        value: null,
    });

但是，您可能需要的是一个空数组：

useState([]);

我还要将当前行

[{label:null，value:null}]

更改为空数组

[]

---

然后，您的

testingCategories

标志将起作用，因为

testingCategories

最初将是一个长度为0的数组，这将使真实性测试失败。

仍然是一个未定义的错误您是否遵循了此步骤：

我还将您的当前行[{label:null，value:null}]更改为一个空数组[]

？如果您记录TestingCategories.length，值是多少？是的，我的useEffect对更改

类别数据的影响甚至没有通过…下拉选择器立即进行渲染，并在标签上抛出未定义的错误，因为useState（[]）没有
label
属性，我想我对
undefined
错误的位置感到困惑。你能制作一个可以复制的小吃吗？如果有帮助的话，我找到了这期的图书馆。也许你没有最新的版本！这就是我刚才看到的…7天前一个合并的提交。现在我得到的数据是正确的！非常感谢。