逗号拆分数组仅使用 .map 迭代第一个结果

Question

我有一个 guns.json 对象，它包含我的 React.js 应用程序中的对象数组。我有一个数组，它是使用 split(',') 函数从逗号分隔的字符串创建的。我希望我的应用能够识别其中一个字符串以匹配 guns.json 对象中的 guns.weapon 字符串。该代码目前正在运行，但它只迭代一个 return 而不是每个数组项的结果。只有第一个数组项触发 return。我的 for 循环似乎无法正常工作。

{this.state.items.map((item, index) => {
  return (
    <div key={index}>
      <List>                               
        {this.state.items[index].squadMembers.map((squadMember, index) => {
          var arr = squadMember.equipment.split(',');
          return (
            <div key={index}>
              <table>
                <tbody>
                  {guns.map((gun, index) => {
                    {for (let i = 0; i < arr.length; i++) {
                      if (arr[i] === gun.weapon) {
                        return (
                          <tr key={index}>                                                                              
                            <td>{gun.weapon}</td>
                            <td>"..."</td>
                            <td>"..."</td>
                          </tr>
                        )
                      }
                    }}
                  })}
                </tbody>
              </table>
            </div>
          )
        })}
      </List>
    </div>                                                                  
  )
})}

Answer 1

我的建议是在你的函数中使用reduce，而且如果你写得好，你可以防止自己在这个indentation hell。

假设 guns 是这个数组：

guns = [{id: 1, name: 'hello'}, {id: 2, name: 'world'}];

你的 arr 是：

arr = ['hello', 'ajay']

然后你可以使用reduce来获取guns和arr中常见的项目。

guns.reduce(function(brr, gun){
    arr.forEach(function(item){
        if(item === gun.name){
            brr.push(item);
        }
    })
    return brr;
}, [])

所以你应该做的是（可能会产生一些 braces/indentation 等问题，所以只是给你一个想法）：

{this.state.items.map((item, index) => {
  return (
    <div key={index}>
      <List>                               
        {this.state.items[index].squadMembers.map((squadMember, index) => {
            var arr = squadMember.equipment.split(',');
            const itemsToRender = guns.reduce(function(brr, gun){
                arr.forEach(function(item){
                if(item === gun.name){
                    brr.push(gun);
                }
            })
            return brr;
            }, []);


            return (
              <div key={index}>
                    <table>
                        <tbody>
                            {itemsToRender
                                 .map((gun, index) => {
                                     return (
                                         <tr key={index}>                                                                                
                                             <td>{gun.weapon}</td>
                                             <td>"..."</td>
                                             <td>"..."</td>
                                            </tr>
                                      )
                             }
                             </tbody>
                         </table>
                     </div>
                  )})}
            </List>
        </div>                                                                  
    )
})}

Answer 2

解决方案是在我的 split(',') 函数中，我忘记在参数中添加 space。 split(', ') 删除了每个项目之前的 space 。 return 没有在第一个值之后迭代，因为每个字符串前面都有一个 space。

逗号拆分数组仅使用 .map 迭代第一个结果

comma split array only iterating first result with .map

arrays

reactjs

for-loop

split

map-function