неправильный порядок в firefox для списка порядка реакции, имеющего вложенный неупорядоченный список

Question

У меня возникла проблема с упорядочением элементов списка в firefox, ниже приведен код:

<ol>
  {
   Object.keys(rules).map((key) => {
   if (typeof rules[key] === 'string') {
      return <li key={key}>{rules[key]}</li>
    } else if (typeof rules[key] === 'object') {
       const nested = rules[key].subList
       return (
         <ul key={key}>
         {
           Object.keys(nested).map((key) => {
            return <li key={key}>{nested[key]}</li>
           })
         }
         </ul>
       )
      }
     })
   }
</ol>

Вывод кода:

 1. first
 2. second:
  . option
  . another option
 5. third
 6. fourth

Но желаемый результат:

 1. first
 2. second:
   . option
   . another option
 3. third
 4. fourth

Я знаю, что проблема в том, что неупорядоченный список должен быть вложен под второй элемент списка, но есть ли способ просто изменить текущий код для достижения желаемого результата?

Введите json это:

"rules": {
  "list": [
    "first",
    "second:",
    {
      "subList": [
        "option",
        "another option"
      ]
    },
    "third",
    "fourth"
  ]
}

Answer 1

хорошо, вот обходной путь, который у меня сработал:

Во-первых, мне нужно немного изменить структуру JSON, например:

"rules": {
  "list": [
    "first",
    {
      "second": [
        "option",
        "another option"
      ]
    },
    "third",
    "fourth"
  ]
}

, а затем некоторые изменения в коде

<ol>
  {
   Object.keys(rules).map(key => {
     if (typeof rules[key] === 'object') {
        const nested = rules[key]
        return Object.keys(nested).map(mkey => {
          return <li key={key}>{mkey}:<ul>
            {
              Object.keys(nested[mkey]).map(nkey => {
                return <li key={nkey}>{nested[mkey][nkey]}</li>
              })
            }
          </ul></li>
        })
      } else {
        return <li key={key}>{rules[key]}</li>
      }
    })
   }
</ol>