разделенный запятыми массив только повторяющийся первый результат с .map

Question

У меня есть объект guns.json, который содержит массив объектов в моем приложении React.js.У меня есть массив, который я создал из строки, разделенной запятыми, используя функцию split (',').Я хочу, чтобы мое приложение распознало одну из этих строк, совпадающую со строкой guns.weapon в моем объекте guns.json.Код в настоящее время работает, однако он повторяет только один возврат вместо результата каждого элемента массива.только первый элемент массива вызывает возврат.Мой цикл 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

Решением было то, что в моей функции split (',') я забыл добавить пробел в аргументе. split (',') убрал пробел перед каждым элементом. возврат не повторялся после первого значения, потому что перед каждой строкой был пробел.

Answer 2

Мое предложение будет использовать сокращение в вашей функции, также, если вы напишите это хорошо, вы можете помешать себе вернуться к этому indentation hell.

Предположим, guns это массив:

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

и ваш arr:

arr = ['hello', 'ajay']

Затем вы можете использовать уменьшить, чтобы получить предметы, которые обычно встречаются в 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>                                                                  
    )
})}