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（'，'）删除了每个项目之前的空格。返回值不会在第一个值之后重复，因为每个字符串前面都有一个空格。

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

2 个答案: