reactjs - useField 钩子的字段显示一个 sessionStorage 条目的值未定义

Question

我已经CustomSelectField在库中定义了如下所示的字段，formik并尝试通过在控制台日志中打印来查看显示的field内容，如下所示

const CustomSelectField = ({
                               placeholder,
                               disabled,
                               ...props
                           }) => {
    const [field, meta] = useField(props);

    
    const errorText = meta.error && meta.touched ? meta.error : "";
    const data = JSON.parse(sessionStorage.getItem(field.name))

   console.log("April 23 : Props testing using field");
   console.log(field);

    const menuItems = (data.map((rec, idx) => {
        return (
            <MenuItem key={rec.id} value={rec.id}>{rec.description}</MenuItem>
        )
    }))
    return (
        <div>
            <InputLabel id="selectLabel">{placeholder}</InputLabel>
            <Field
                labelId={placeholder}
                {...field}
                disabled={disabled}
                as={StyledSelect}
                error={!!errorText}>
                {menuItems}
            </Field>
        </div>
    );
};

我在我的表格中使用上述内容，如下所示：

<CustomSelectField name="requestPrioritieses" type="select" placeholder="Priority"/>

以下值存储在密钥的会话存储中requestPriorities。

[{"id":1,"description":"High","_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/1"},
"requestPriorities":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/1"}}},
{"id":2,"description":"Low","_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/2"},
"requestPriorities":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/2"}}},
{"id":3,"description":"Normal","_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/3"},
"requestPriorities":{"href":"http://myserver.hs.abc.com:443/Webservices/api/requestPrioritieses/3"}}}]

Console.log 中的结果如下：

April 23 : Props testing using field 
Object { name: "requestPrioritieses", value: 3, onChange: useEventCallback(), onBlur: useEventCallback() }

由于会话存储中有三个 id，我在上面的控制台日志中看到value了。3

我正在尝试将相同的东西用于会话存储中的不同条目，并且打印value为undefined. 不确定id值是否不规则1，是2什么5原因？这是我在密钥的会话存储中拥有的（值部分）testLevels：

[{"id":1,"testLevel":"Leve1","description":null,"_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/1"},
"testLevel":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/1"}}},
{"id":2,"testLevel":"Level2","description":null,"_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/2"},
"testLevel":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/2"}}},
{"id":5,"testLevel":"Level3","description":null,"_links":{"self":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/5"},
"testLevel":{"href":"http://myserver.hs.abc.com:443/Webservices/api/testLevels/5"}}}]

我修改了以下内容：

<MenuItem key={rec.id} value={rec.id}>{rec.description}</MenuItem>

至

<MenuItem key={rec.id} value={rec.id}>{rec.testLevel}</MenuItem>

并定义了一个单独const CustomTestLevelSelectField的以适应上述更改，如下所示：

const CustomTestLevelSelectField = ({
                               placeholder,
                               disabled,
                               ...props
                           }) => {
    const [field, meta] = useField(props);

    
    const errorText = meta.error && meta.touched ? meta.error : "";
    const data = JSON.parse(sessionStorage.getItem(field.name))

   console.log("April 23 : Props testing using field");
   console.log(field);

    const menuItems = (data.map((rec, idx) => {
        return (
            <MenuItem key={rec.id} value={rec.id}>{rec.testLevel}</MenuItem>
        )
    }))
    return (
        <div>
            <InputLabel id="selectLabel">{placeholder}</InputLabel>
            <Field
                labelId={placeholder}
                {...field}
                disabled={disabled}
                as={StyledSelect}
                error={!!errorText}>
                {menuItems}
            </Field>
        </div>
    );
};

我在我的表格中使用上述内容，如下所示：

<CustomTestLevelSelectField name="testLevels" type="select" placeholder="Test Level"/>

但是 console.log 显示如下：

April 23 : Props testing using field 
Object { name: "testLevels", value: undefined, onChange: useEventCallback(), onBlur: useEventCallback() }

为什么value不显示3和显示undefined？就像requestPriorities，它应该显示 3 个条目，因为testLevelssessionStorage 中有 3 个 id。为什么显示未定义？

标签： reactjsreact-hooksformikreact-hook-form