时间戳

首页 > 解决方案 > React：遍历数组仅返回第一个结果

javascript - React：遍历数组仅返回第一个结果

问题描述

我花了很长时间才让它返回一个结果，但现在我只能让这个函数返回我数组中的第一个结果。

示例 JSON：（下一个函数的 JSON.stringify(mapResult) 的输出）

[
  [
    {
      "_attributes": {
        "key": "aed8d486-9557-4e53-ae9c-78bfc938c719",
        "number": "1",
        "type": "Video",
        "title": "Stars.mov",
        "shortTitle": "Stars.mov",
        "state": "Completed",
        "position": "119980",
        "duration": "119980",
        "loop": "False",
        "muted": "True",
        "volume": "100",
        "balance": "0",
        "solo": "False",
        "audiobusses": "M",
        "meterF1": "0",
        "meterF2": "0"
      },
      "_text": "Stars.mov"
    },
    {
      "_attributes": {
        "key": "b9be415e-1c63-47fb-9791-72432eccd0c3",
        "number": "2",
        "type": "Colour",
        "title": "Colour",
        "shortTitle": "Colour",
        "state": "Paused",
        "position": "0",
        "duration": "0",
        "loop": "False"
      },
      "_text": "Colour"
    },
    {
      "_attributes": {
        "key": "23d74bb3-dbd8-410d-8b16-d05a9db4b656",
        "number": "3",
        "type": "Capture",
        "title": "Sample Input",
        "shortTitle": "Sample Input",
        "state": "Running",
        "position": "0",
        "duration": "0",
        "loop": "False",
        "muted": "True",
        "volume": "100",
        "balance": "0",
        "solo": "False",
        "audiobusses": "M",
        "meterF1": "0",
        "meterF2": "0"
      },
      "_text": "Sample Input"
    }
  ]
]

组件内的功能：

switcherPGM = () => {

    console.log(JSON.stringify(mapResult));
    
    const inputMap = mapResult.map((input, i) => {
      return (
        <div key={i}>
          <h3>{input[i]._attributes.title}</h3>
          <span>
            <Button color="danger" size="lg" block>
              {input[i]._attributes.number}<br />
              {input[i]._attributes.title}<br />
            State: {input[i]._attributes.state}<br />
            Loop: {input[i]._attributes.loop}<br />
            Type:  {input[i]._attributes.type}<br />
            </Button>
          </span>
        </div>
      )
    })
    return inputMap;
  }

这仅返回第一项，星星。不会创建其他按钮。

任何帮助表示赞赏。

标签： javascriptreactjs

解决方案

您在另一个数组中有一个数组。这就是为什么你的 map 函数只返回一个元素的原因。像这样重写你的代码....

const modifiedMap = mapResulst[0];
let inputMap = []
if(modifiedMap){
  inputMap = modifiedMap.map((input, i) => {
      return (
        <div key={i}>
          <h3>{input._attributes.title}</h3>
          <span>
            <Button color="danger" size="lg" block>
              {input._attributes.number}<br />
              {input._attributes.title}<br />
            State: {input._attributes.state}<br />
            Loop: {input._attributes.loop}<br />
            Type:  {input._attributes.type}<br />
            </Button>
          </span>
        </div>
      )
    })
}
return inputMap

推荐阅读