尝试将一个数组中的文本输出到另一个数组中 - React JS

Question

我正在尝试扩展选项卡数组的功能，以便能够像 Chrome 中一样有一个来回按钮，允许用户在该选项卡中浏览他们的历史记录。

tabArray 示例

const [tabArray, setTabArray] = useState([{ContentList:[{TabText:'Home', Content:<Home/>, Current:false},{TabText:'Convert Temp', Content:<ConvertTemp/>, Current:true}], Selected:true}])

tabArray 看起来像示例： 第一个对象是一个数组，其中包含描述选项卡的多个对象：选项卡中的文本、选项卡显示的内容以及是否是选项卡的活动内容。当用户在选项卡历史记录中来回切换时，当前布尔值将是我所控制的。

第二个对象是一个名为 Selected 的布尔值，它控制当前显示哪个选项卡并调整选项卡本身的外观，以使其更清楚哪个是当前活动选项卡。

我的问题来自于尝试在 tabArray 中输出 ContentList 数组。 我能够按照我希望的方式构建它，甚至让控制台日志准确地显示我所期望的内容。 但是当我尝试返回值时，它似乎并没有完全返回。

这是我在选项卡栏中显示文本的代码，它应该循环遍历 tabArray，然后循环遍历 ContentList 并获取当前活动选项卡的详细信息以填充表格中的单元格。 tabArray 中的每个对象都应该有一个 td。即对于我的示例，我希望看到“Home”和“Convert Temp”。 然后使用 Selected 布尔值来影响类名。

我现在已经解决了这个问题，我必须将回报提高一个级别，现在会在选项卡中显示文本。

<tr>
          {tabArray.map((v,index) => {
            return (
            v.ContentList
              .filter(list => list.Current)
              .map(list => 
                //return (
                  <td key={index} 
                      className={v.Selected ? "selected" : "hide"} > 
                    <div className="TabText" onClick={() => selectByIndex(index, setTabArray)}>{list.TabText}</div>
                    <button className="CloseTab" onClick={() => deleteByIndex(index, setTabArray)} >x</button>
                  </td>
                //)
              )
            )
          })}
</tr>

这就是我显示选项卡内容的方式，它通过 tabArray 显示循环，无论选择哪个选项卡，它都会循环遍历其 ContentList，然后返回当前内容。 如果没有选择，则返回当前隐藏的内容。

我现在也解决了这个问题，得到了与上面类似的返回值，并且还意识到我正在尝试引用 current 而不是 Current。

let tabContent = [
  tabArray.map((v, index) => {
    return(
      v.Selected?

        v.ContentList
          .filter(list => list.Current)
          .map(list => 
            <div key={index}> {list.Content} </div>
          )
      :
        v.ContentList
          .filter(list => list.Current)
          .map(list => {
              return <div key={index} className='hidden'> {list.Content} </div>
          })
    )
    // if (v.Selected) { 
    //     v.ContentList
    //       .filter(list => list.current)
    //       .map(list => 
    //         <div key={index}> {list.Content} </div>
    //       )
    // }
    // else {
    //   v.ContentList
    //     .filter(list => list.current)
    //     .map(list => {
    //         return <div key={index} className='hidden'> {list.Content} </div>
    //     })
    // } 
  })
]

// console.log(tabContent)

return tabContent

任何帮助将不胜感激。 如果我还不够清楚，我可以解释更多细节。 预先感谢。

Answer 1

我发现了这个问题，我主要需要将代码中的返回值降低到较低的级别。 我尝试设置 tabContent 的问题也是由于错误地引用了 list.current 而不是 list.Current