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

Question

我有一个guns.json对象，它包含我的React.js应用程序中的一个对象数组。我有一个数组，我使用split（'，'）函数从逗号分隔的字符串创建。我希望我的应用程序识别其中一个字符串，以匹配我的guns.json对象中的guns.weapon字符串。代码当前正在工作，但它只迭代一个返回而不是每个数组项的结果。只有第一个数组项触发返回。我的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;
}, [])

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

{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（'，'）函数中，我忘了在参数中添加空格。 split（'，'）删除了每个项目之前的空格。返回没有在第一个值之后迭代，因为每个字符串前面都有一个空格。