反应渲染对象值，其中键是可变的

Question

我正在尝试渲染一个每个键都不同的对象。我必须将每个键显示为一个复选框，如果它被选中，我想显示相关值（如果值数组中有的话）。

我的对象结构如下：

    myObj: {
           "key1": ["val1", "val2"],
           "key2": [],
           ...
           }

我正在浏览键列表以呈现复选框，并在其中使用下面的代码来呈现值。我有属性 myKey.value 中可访问的当前密钥的值。但是，如果我尝试使用 formValues.myObj.myKey.value 访问这些值，它会抱怨属性 myKey 在类型 myObj 上不存在。

{formValues.myObj.[`${currentKey}`].length > 0 && 
    <CustomArrayHelper
    values={formValues.myObj.currentKey}
    arrayName="test"
    onRender={(avIndex: number) => (
        <div className="my-container std-TextField">
            <FormikTextField
                name={`test.${avIndex}`}
                label={`Test`}
            />
        </div>
    )}
/>}

我需要一些方法来动态指定当前键以获取每个键的值。上面的代码returns一个错误。

我还有单独可用的可用键列表：

export const MyKeys = [
    {
        value: 'key1',
        label: 'key1'
    },
    ...
]

Answer 1

要使用计算的属性键访问值，您需要使用括号表示法。

<CustomArrayHelper values={formValues.myObj[currentKey]} />

此外，在使用方括号表示法访问属性时不应该放置 dot，这是语法错误。您还可以删除字符串模板语法，这是不必要的。

formValues.myObj[currentKey].length

反应渲染对象值，其中键是可变的

React render object value where key is variable

javascript

reactjs

object

jsx

rendering