0

我有一个 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>                                                                  
  )
})}
4

2 回答 2

0

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

假设guns是这个数组：

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

你的arr是：

arr = ['hello', 'ajay']

guns然后您可以使用 reduce 来获取和中常见的项目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>                                                                  
    )
})}
于 2019-03-07T17:15:23.440 回答
0

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

于 2019-03-07T18:33:29.410 回答