javascript - 在 Reactjs 中映射数组对象

Question

我有一个对象，该对象的每个键都有一个数组值

const correctionsWords  = {
"word": [ "1" , "2"] ,
"word2": ["20" ,"22" ] 
};

我使用以下代码映射了每个键

let correctionList =  Object.keys(correctionsWords).map(  (key)  => {
        return (
          <div>
              {
                  //console.log( 'After Mapping ' , correctionsWords[key]) [1,2,3]
                   <ul>
                     <li>{key} { /* word  */}
                      <ul> 
                        <li>{correctionsWords[key]}</li>
                      </ul>
                     </li>  
                     </ul>
              } 
          </div> 
        ); });

结果是 * key: 单词 * 值:1 2 如何列出数组的值？

Answer 1

再次映射每个数组元素:

<ul>
  {correctionsWords[key].map(el => (
    <li key={el}>{el}</li>
  ))}
</ul>

我在这里使用了key作为元素。如果元素不唯一，最好使用另一个键。此外，您还需要另一个键用于最顶层 div 中的对象映射:

return (
    <div key={key}>
    ...