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> 
        ); });

结果为*键：单词 *值：1 2 如何列出数组的值？

Answer 1

再次映射每个数组元素：

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

我在这里使用了key作为元素。如果元素不是唯一的，最好使用另一个键。另外，您还需要在最上方的div中为对象映射添加另一个键：

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

Answer 2

我认为您要寻找的是将最里面的li替换为：

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

在React.js中映射数组的对象

2 个答案: