为什么我不能在反应中从 json 读取对象？答案

【问题标题】：why i cant read an object from json in react?为什么我不能在反应中从 json 读取对象？
【发布时间】：2020-05-01 17:53:06
【问题描述】：

您好，我正在尝试导入这个 JSON 文件：

[
  {
    "nombre":"Is this It",
    "año":" July 30, 2001",
    "genre":"Indie rock",
    "label":"RCA",
    "lugar":"Estados Unidos",
    "portada":"https://www.elquintobeatle.com/wp-content/uploads/2015/05/the-strokes-is-this-it-1-1068x1068.jpg",
    "descripcion":"asdasd.",
    "canciones":[
      {
        "numero":1,
        "titulo":"Is this It"
      },
      {
        "numero":2,
        "titulo":"The Modern Age"
      },
      {
        "numero":3,
        "titulo":"Soma"
      },
      {
        "numero":4,
        "titulo":"Barely Legal"
      },
      {
        "numero":5,
        "titulo":"Someday"
      },
      {
        "numero":6,
        "titulo":"Alone, Together"
      },
      {
        "numero":7,
        "titulo":"Last Nite"
      },
      {
        "numero":8,
        "titulo":"Hard to Explaim"
      },
      {
        "numero":9,
        "titulo":"New York City Cops"
      },
      {
        "numero":10,
        "titulo":"Trying Your Luck"
      },
      {
        "numero":11,
        "titulo":"Take It or Leave It"
      }
    ]
  },
  {
    "nombre":"Room on Fire",
    "año":"2003",
    "genre":"Indie rock",
    "label":"RCA",
    "lugar":"Estados Unidos",
    "portada":"https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg",
    "descripcion":"asdasd",
    "canciones":[
      {
        "numero":1,
        "titulo":"What Ever Happened"
      },
      {
        "numero":2,
        "titulo":"Reptilia"
      },
      {
        "numero":3,
        "titulo":"Automatic Stop"
      },
      {
        "numero":4,
        "titulo":"12:51"
      },
      {
        "numero":5,
        "titulo":"You Talk Way Too Much"
      },
      {
        "numero":6,
        "titulo":"Between Love & Hate"
      },
      {
        "numero":7,
        "titulo":"Meet Me in the Bathroom"
      },
      {
        "numero":8,
        "titulo":"Under Control"
      },
      {
        "numero":9,
        "titulo":"The Way It Is"
      },
      {
        "numero":10,
        "titulo":"The End Has No End"
      },
      {
        "numero":11,
        "titulo":"I Can't Win"
      }
    ]
  }
]

import * as data from '../catalogo.json';

然后通过一个函数我像这样更新组件的状态：

updateState(e)
{
    this.setState
    (
        {
            albumActual : data[1]
        }   
    );
}

然后我想阅读信息并在这样的表格中写入：

<tr>
    <td className='celda'> Song: </td>
     <td className='celda'> 
       <ul>
            <li>
               <div> 
                    {this.state.albumActual.canciones[1].numero }
                </div> 
               </li>
        </ul>
  </td>

我遇到以下问题： result

我只是不明白为什么。我只是一个在 react 中开发的初学者。

这是完整的组件：

从“反应”导入反应导入'../assets/css/ComponenteBarra.css'；从 '../catalogo.json' 导入 * 作为数据；

类 BarraAlbumes 扩展了 React.Component { 构造函数（道具） { 超级（道具）； this.actualizarState = this.actualizarState.bind(this); this.state = {专辑实际：[]} }

actualizarState(e)
{
    this.setState
    (
        {
            albumActual : data[1]
        }   
    );
}

render()
{
    return(
    <div id='barra'>

            <table>
                <thead>
                    <td colSpan='7'>
                        <h1 id='tituloDeBarra' > ALBUMES </h1>
                    </td>
                </thead>
                <tbody>
                <tr>
                    <td> 
                        <button onClick={this.actualizarState}>
                            <img src='https://upload.wikimedia.org/wikipedia/en/thumb/0/09/The_Strokes_-_Is_This_It_cover.png/220px-The_Strokes_-_Is_This_It_cover.png' alt='portada' />
                        </button>
                   </td>

                   <td>
                       <button>
                            <img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg' alt='portada' />
                       </button>
                   </td>

                   <td > 
                        <button>
                            <img src='https://upload.wikimedia.org/wikipedia/en/thumb/0/0f/FIOEstrokes.jpg/220px-FIOEstrokes.jpg' alt='portada' />
                        </button> 
                   </td>

                   <td >
                       <button>
                                <img src='https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/Strokes_1.jpg/220px-Strokes_1.jpg' alt='portada' />
                       </button>
                   </td>

                   <td > 
                        <button>
                            <img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/91/The_Strokes_-_Comedown_Machine.jpg/220px-The_Strokes_-_Comedown_Machine.jpg' alt='portada' />
                        </button> 
                   </td>

                   <td >
                       <button>
                                <img src='https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/The-Strokes-Future-Present-Past-EP.jpg/220px-The-Strokes-Future-Present-Past-EP.jpg' alt='portada' />
                       </button>
                   </td>

                   <td >
                       <button>
                                <img src='https://upload.wikimedia.org/wikipedia/en/thumb/f/f8/The_Strokes_-_The_New_Abnormal.png/220px-The_Strokes_-_The_New_Abnormal.png' alt='portada' />
                       </button>
                   </td>

                </tr>
                </tbody>
            </table>


            <table id='tableinfo'>
                <thead>
                        <td id='titulotabla' colSpan='2'> INFORMACION DEL ALBUM </td>
                </thead>

                <tbody>
                    <tr>
                        <td className='celda' > Nombre: </td>
                        <td className='celda' > {this.state.albumActual.nombre} </td>
                    </tr>

                    <tr>
                        <td className='celda'> Año de Lanzamiento: </td>
                        <td className='celda'>   {this.state.albumActual.año} </td>
                    </tr>

                    <tr>
                        <td className='celda'> Genero: </td>
                        <td className='celda'>   {this.state.albumActual.genre} </td>
                    </tr>
                    <tr>
                        <td className='celda'> Disquera: </td>
                        <td className='celda'>   {this.state.albumActual.label} </td>
                    </tr>
                    <tr>
                        <td className='celda'> Lugar: </td>
                        <td className='celda'>  {this.state.albumActual.lugar}  </td>
                    </tr>
                    <tr>
                        <td className='celda'> Portada: </td>
                        <td className='celda'> <img src={this.state.albumActual.portada}  alt='foto' /> </td>
                    </tr>
                    <tr>
                        <td className='celda'> Descripcion: </td>
                        <td className='celda'> {this.state.albumActual.descripcion} </td>
                    </tr>
                    <tr>
                        <td className='celda'> Canciones: </td>
                        <td className='celda'> 
                            <ul>
                                <li>
                                     <div> 
                                            {this.state.albumActual.canciones[1].numero }
                                     </div> 
                                </li>
                            </ul>
                        </td>
                    </tr>

                </tbody>
            </table>
    </div>      
    )   
}

}

导出默认的 BarraAlbumes；

【问题讨论】：

你为什么喊
您是否征得杰森的许可才能被导入？
你好，我不知道我必须这样做，但我仍然可以访问 json 的其他字段，如 nombre、año 等。问题是当我访问“canciones”字段时
欢迎来到 Stackoverflow。请不要使用大写字母，因为这意味着您正在（生气）向其他人大喊大叫。将您的代码封装在三个反引号中 - 换行符......您的代码，换行符 - 有反引号。反引号是那些：`这可以防止像您有atm一样损坏的代码部分。在您的帖子中。
哦！好的，我不知道。 1 小时前才开始使用它。谢谢你的建议。

标签： javascript arrays json reactjs

【解决方案1】：

这是一个示例解决方案：

重点是要检查是否存在要输出的变量。

const data = [{
    "nombre": "Is this It",
    "año": " July 30, 2001",
    "genre": "Indie rock",
    "label": "RCA",
    "lugar": "Estados Unidos",
    "portada": "https://www.elquintobeatle.com/wp-content/uploads/2015/05/the-strokes-is-this-it-1-1068x1068.jpg",
    "descripcion": "asdasd.",
    "canciones": [{
        "numero": 1,
        "titulo": "Is this It"
      },
      {
        "numero": 2,
        "titulo": "The Modern Age"
      },
      {
        "numero": 3,
        "titulo": "Soma"
      },
      {
        "numero": 4,
        "titulo": "Barely Legal"
      },
      {
        "numero": 5,
        "titulo": "Someday"
      },
      {
        "numero": 6,
        "titulo": "Alone, Together"
      },
      {
        "numero": 7,
        "titulo": "Last Nite"
      },
      {
        "numero": 8,
        "titulo": "Hard to Explaim"
      },
      {
        "numero": 9,
        "titulo": "New York City Cops"
      },
      {
        "numero": 10,
        "titulo": "Trying Your Luck"
      },
      {
        "numero": 11,
        "titulo": "Take It or Leave It"
      }
    ]
  },
  {
    "nombre": "Room on Fire",
    "año": "2003",
    "genre": "Indie rock",
    "label": "RCA",
    "lugar": "Estados Unidos",
    "portada": "https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg",
    "descripcion": "asdasd",
    "canciones": [{
        "numero": 1,
        "titulo": "What Ever Happened"
      },
      {
        "numero": 2,
        "titulo": "Reptilia"
      },
      {
        "numero": 3,
        "titulo": "Automatic Stop"
      },
      {
        "numero": 4,
        "titulo": "12:51"
      },
      {
        "numero": 5,
        "titulo": "You Talk Way Too Much"
      },
      {
        "numero": 6,
        "titulo": "Between Love & Hate"
      },
      {
        "numero": 7,
        "titulo": "Meet Me in the Bathroom"
      },
      {
        "numero": 8,
        "titulo": "Under Control"
      },
      {
        "numero": 9,
        "titulo": "The Way It Is"
      },
      {
        "numero": 10,
        "titulo": "The End Has No End"
      },
      {
        "numero": 11,
        "titulo": "I Can't Win"
      }
    ]
  }
]

class Album extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      albumActual: {}
    }
    this.updateState = this.updateState.bind(this)
  }

  updateState() {
    this.setState({
      albumActual: data[1]
    })
  }

  render() {
    return (
      <div>
        <button onClick = {this.updateState}>Click</button>
        <ul>
        {
          !this.state.albumActual.canciones
            ? null
            : this.state.albumActual.canciones.map(e => {
              return (
                <li>{e.numero}: {e.titulo}</li>
              )
            })
        }
        </ul>
      </div>
    )
  }
}

ReactDOM.render( <Album /> , document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

所以，你可以改变这个：

{this.state.albumActual.canciones[1].numero }

到

{
  !this.state.albumActual.canciones
    : null
    ? this.state.albumActual.canciones[1].numero
}

【讨论】：

【解决方案2】：

向您展示完整的组件以及如何调用该函数。

但我非常有信心，问题在于在第一次渲染时，您的数据还不是数据。

您可以将渲染方法包装在条件中，也可以将状态设置为默认值。

import * as data from '../catalogo.json';


class App extends React.Component {
  constructor(props) {
    super(props);

    // Set the state directly. Use props if necessary.
    this.state = {
      albuls: data
    }
  }
}

【讨论】：

函数被事件调用，
你必须做一个条件渲染。

【解决方案3】：

最初 this.state.albumActual 是空数组，因为您在单击按钮后使用 data[1] 设置状态（在函数 actualizarState 中）。所以请将 {this.state.albumActual.canciones[1].numero } 替换为以下代码：

{this.state.albumActual.canciones? this.state.albumActual.canciones[1].numero : null}

【讨论】：