Javascript 为什么我能'；你没有得到结果吗？
我不知道为什么在更改组件状态时出错。我试图做的是每次单击按钮并调用函数state时更改组件的状态 这是完整的组件：Javascript 为什么我能'；你没有得到结果吗？,javascript,reactjs,events,components,frontend,Javascript,Reactjs,Events,Components,Frontend,我不知道为什么在更改组件状态时出错。我试图做的是每次单击按钮并调用函数state时更改组件的状态 这是完整的组件： import React from 'react' 导入“../assets/css/ComponenteBarra.css”； 将*作为数据从“../catalogo.json”导入 类ComponentBarra扩展了React.Component { 建造师（道具） { 超级（道具）； this.actualzarstate=this.actualzarstate.bind
import React from 'react'
state（e）
{
var img=e.target.alt；
变量指标=该指数（img）；
控制台日志（标识）
这是我的国家
(
{
albumActual:数据[标识]
}
);
}
指数烧伤（a）
{
印度变种；
开关（a）
{
案例“isthisit”：indice=0；break；
案例“roomonfire”：指标=1；中断；
案例“地球的第一印象”：指标=2；中断；
案例“角度”：指标=3；中断；
案例“ComedDownMachine”：指标=4；断裂；
案例“未来-现在-过去”：指标=5；中断；
案例“新异常”：指标=6；中断；
默认值：indice=0；
}
回归指数；
}
render（）
{
返回(
相册
唱片信息
名义：
{this.state.albumActual.nombre}
阿尼诺·德兰扎米恩托：
{this.state.albumActual.ano}
慷慨：
{this.state.albumActual.genre}
标题：
{this.state.albumActual.label}
卢格：
{this.state.albumActual.lugar}
波塔达：
描述：
{this.state.albumActual.Description}
癌症：
{
！this.state.albumActual.canciones
无效的
：this.state.albumActual.canciones.map（e=>{
返回(
- {e.numero}:{e.titulo}
)
})
}
)
}
我觉得你的代码很好。我使用了我这边的虚拟数据。json文件中可能有错误。如果共享错误详细信息会更好。下面是工作正常的代码
从“React”导入React；
常数数据=[
{
阿诺：“测试”，
类型：“工作”，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[{
数字：“数字”，
泰特罗：“泰特罗”
}]
},
{
阿诺：“测试”，
类型：“工作”，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[]
},
{
阿诺：“第二”，
类型：'阿霍'，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[]
},
{
阿诺：“测试”，
类型：“工作”，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[]
},
{
阿诺：“测试”，
类型：“工作”，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[]
},
{
阿诺：“测试”，
类型：“工作”，
标签：'是'，
卢格：“又来了”，
波塔达：“努根”，
描述：'测试'，
癌症：[]
}
];
类ComponentBarra扩展了React.Component{
建造师（道具）{
超级（道具）；
this.actualizarState=this.actualizarState.bind（this）；this.state={albumActual:data[0]}
}
国家（e）{
调试器；
var img=e.target.alt；
变量指标=该指数（img）；
控制台日志（标识）
这是setStat
actualizarState(e)
{
var img = e.target.alt;
var indice = this.indexarAlbumes(img);
console.log(indice)
this.setState
(
{
albumActual : data[indice]
}
);
}
indexarAlbumes(a)
{
var indice;
switch(a)
{
case 'isthisit' : indice = 0;break;
case 'roomonfire' : indice =1;break;
case 'firstimpressionsofearth' : indice = 2;break;
case 'angles' : indice =3;break;
case 'comedownmachine' : indice = 4;break;
case 'futurepresentpast' : indice =5;break;
case 'thenewabnormal' : indice = 6;break;
default : indice = 0;
}
return indice;
}
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='isthisit' />
</button>
</td>
<td>
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg' alt='roomonfire' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/0/0f/FIOEstrokes.jpg/220px-FIOEstrokes.jpg' alt='firstimpressionsofearth' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/Strokes_1.jpg/220px-Strokes_1.jpg' alt='angles' />
</button >
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/91/The_Strokes_-_Comedown_Machine.jpg/220px-The_Strokes_-_Comedown_Machine.jpg' alt='comedownmachine' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<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='futurepresentpast' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<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='thenewabnormal' />
</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.ano} </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>
{
!this.state.albumActual.canciones
? null
: this.state.albumActual.canciones.map(e => {
return (
<li>{e.numero}: {e.titulo}</li>
)
})
}
</ul>
</td>
</tr>
</tbody>
</table>
</div>
)
}
import React from 'react';
const data = [
{
ano: 'testing',
genre: 'working',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: [{
numero: 'numero',
titulo: 'titulo'
}]
},
{
ano: 'testing',
genre: 'working',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: []
},
{
ano: 'second',
genre: 'aho',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: []
},
{
ano: 'testing',
genre: 'working',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: []
},
{
ano: 'testing',
genre: 'working',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: []
},
{
ano: 'testing',
genre: 'working',
label: 'yes',
lugar: 'again',
portada: 'Nugen',
description: 'testing',
canciones: []
}
];
class ComponenteBarra extends React.Component {
constructor(props) {
super(props);
this.actualizarState = this.actualizarState.bind(this); this.state = { albumActual: data[0] }
}
actualizarState(e) {
debugger;
var img = e.target.alt;
var indice = this.indexarAlbumes(img);
console.log(indice)
this.setState
(
{
albumActual: data[indice]
}
);
}
indexarAlbumes(a) {
var indice;
switch (a) {
case 'isthisit': indice = 0; break;
case 'roomonfire': indice = 1; break;
case 'firstimpressionsofearth': indice = 2; break;
case 'angles': indice = 3; break;
case 'comedownmachine': indice = 4; break;
case 'futurepresentpast': indice = 5; break;
case 'thenewabnormal': indice = 6; break;
default: indice = 0;
}
return indice;
}
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='isthisit' />
</button>
</td>
<td>
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Room_on_Fire_cover.jpg/220px-Room_on_Fire_cover.jpg' alt='roomonfire' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/0/0f/FIOEstrokes.jpg/220px-FIOEstrokes.jpg' alt='firstimpressionsofearth' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/Strokes_1.jpg/220px-Strokes_1.jpg' alt='angles' />
</button >
</td>
<td >
<button onClick={this.actualizarState}>
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/9/91/The_Strokes_-_Comedown_Machine.jpg/220px-The_Strokes_-_Comedown_Machine.jpg' alt='comedownmachine' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<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='futurepresentpast' />
</button>
</td>
<td >
<button onClick={this.actualizarState}>
<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='thenewabnormal' />
</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.ano} </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>
{
!this.state.albumActual.canciones
? null
: this.state.albumActual.canciones.map(e => {
return (
<li>{e.numero}: {e.titulo}</li>
)
})
}
</ul>
</td>
</tr>
</tbody>
</table>
</div>
)
}
}
export default ComponenteBarra;