React：遍历数组只返回第一个结果

Question

我花了很长时间才让它返回一个结果，但现在我只能让这个函数返回我数组中的第一个结果。示例 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"    }  ]]

Answer 1

您在另一个数组中有一个数组。这就是为什么您的 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