Javascript 为什么我不能在react中从json读取对象？

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

[
{
“nombre”：“就是这样”，
“año”：“2001年7月30日”，
“流派”：“独立摇滚”，
“标签”：“RCA”，
“lugar”：“Estados Unidos”，
“波塔达”：https://www.elquintobeatle.com/wp-content/uploads/2015/05/the-strokes-is-this-it-1-1068x1068.jpg",
“描述”：“asdasd”，
“癌症”：[
{
“头号人物”：1，
“提特罗”：“就是这个”
},
{
“头号人物”：2，
“提特罗”：“现代”
},
{
“头号人物”：3，
“提特罗”：“索马”
},
{
“头号人物”：4，
“提特罗”：“几乎不合法”
},
{
“头号人物”：5，
“提特罗”：“总有一天”
},
{
“头号人物”：6，
“提特罗”：“单独，一起”
},
{
“头号人物”：7，
“提托洛”：“最后的夜晚”
},
{
“数字”：8，
“提托洛”：“难以解释”
},
{
“数字”：9，
“提特罗”：“纽约市警察”
},
{
“数字”：10，
“提特罗”：“试试你的运气”
},
{
“头号人物”：11，
“提特罗”：“要么接受，要么放弃”
}
]
},
{
“名称”：“着火的房间”，
“año”：“2003年”，
“流派”：“独立摇滚”，
“标签”：“RCA”，
“lugar”：“Estados Unidos”，
“波塔达”：https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg",
“描述”：“asdasd”，
“癌症”：[
{
“头号人物”：1，
“提特罗”：“发生过什么事？”
},
{
“头号人物”：2，
“提图洛”：“爬行动物”
},
{
“头号人物”：3，
“titulo”：“自动停止”
},
{
“头号人物”：4，
“提多罗”：“12:51”
},
{
“头号人物”：5，
“提特罗”：“你说得太多了”
},
{
“头号人物”：6，
“提特罗”：“爱与恨之间”
},
{
“头号人物”：7，
“提特罗”：“在浴室见”
},
{
“数字”：8，
“泰特罗”：“受控制”
},
{
“数字”：9，
“泰特罗”：“现状”
},
{
“数字”：10，
“提托洛”：“终点没有终点”
},
{
“头号人物”：11，
“提特罗”：“我赢不了”
}
]
}
]

import*作为来自“../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>

歌曲：


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

我遇到了以下问题：

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

这是完整的组件：

从“React”导入React 导入“../assets/css/ComponenteBarra.css”； 将*作为数据从“../catalogo.json”导入

类BarraAlbumes扩展了React.Component { 建造师（道具） { 超级（道具）； this.actualzarstate=this.actualzarstate.bind（this）； this.state={albumActual:[]} }

state（e）
{
这是我的国家
(
{
albumActual:数据[1]
}   
);
}
render（）
{
返回(
相册
唱片信息
名义：
{this.state.albumActual.nombre}
阿尼诺·德兰扎米恩托：
{this.state.albumActual.año}
慷慨：
{this.state.albumActual.genre}
标题：
{this.state.albumActual.label}
卢格：
{this.state.albumActual.lugar}
波塔达：
描述：
{this.state.albumActual.Description}
癌症：


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


)   
}

}

导出默认相册

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

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

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