ForEach 循环不会动态添加条目

Question

我正在为我的应用程序创建一个带有选择选项的过滤器。我遇到的问题是，运行嵌套 for 循环时，选择选项不会填充。

当我指定某个索引时，这些选项将填充一个条目，但不是全部。

代码

                {props.headers.map((header, entriesIndex) => (
                  <Select
                  label={header}
                  value={value}
                  onChange={setValue}
                  placeholder="Enter value..."
                  width={300}
                  >
                  // When specifying the specific entry the data will load into the 
                     correct boxes
                  <SelectOption value={"test"} label={props.data[1][entriesIndex]} />

                  // When doing a for loop like this, I am able to log the entries but 
                     actually specifying all the entries the options don't populate 

                  {props.data.forEach((entries, valuesIndex) => {
                    console.log(entries[entriesIndex])
                    // <SelectOption value={entries[entriesIndex]} label= 
                        {entries[entriesIndex]} />
                  })}
                  </Select>
              ))};

我的嵌套循环有问题，但我不确定是否是这种情况或发生了其他情况。

Answer 1

您的代码的问题似乎是使用

forEach

来映射您的

props.data

。在 JavaScript 中，

forEach

不返回值，并且不应在

JSX

表达式中使用。您应该使用

map

来代替。

{props.headers.map((header, entriesIndex) => (
  <Select
    label={header}
    value={value}
    onChange={setValue}
    placeholder="Enter value..."
    width={300}
  >
    {props.data.map((entries, valuesIndex) => {
      return <SelectOption value={entries[entriesIndex]} label={entries[entriesIndex]} />
    })}
  </Select>
))}