Javascript 反应：此状态未定义

我正在使用React类组件制作一个产品显示网页，页面中有两个部分，一个是产品缩略图区域（左），另一个是产品的大完整图像（右），目前看起来像这样：

我希望当用户点击缩略图时，主大图应该相应地改变为相同的缩略图

JSX

//React、css和所有图像导入
//包含所有缩略图变量
var thumbs=[t1、t2、t3、t4]；
//以相同的索引顺序包含较大的图像
var模型=[b1、b2、b3、b4]；
导出默认类显示扩展组件{
构造函数（）{
超级（）；
此.state={
modelImage:model[0]//最初将显示默认的第一个图像
};
}
render（）{
返回(
//缩略图
{
//我怀疑下面这行有错误
thumbs.map（（拇指，索引）=>
{
//下面这行有错误（可能）
this.setState（{modelImage:model[index]}）
//第一次记录映像，但之后始终未定义
console.log（this.state.modelImage）
}
} />    
)
}
//大形象
)
}
}

在我搜索各种答案的过程中，我发现这与范围有关，应该使用

bind（）

，但我不太了解

this

和scopes的概念，以及如何在我的情况下实现

bind（）

，如果是这样的情况，请帮助我或建议我这里的问题

提前谢谢。

//React、css和所有图像导入
//React, css and all the images import

//contains all the thumbnail variable
 var thumbs = [t1, t2, t3, t4];
//Contains the Larger image in the same index order
 var model = [b1, b2, b3, b4];

export default class Display extends Component {
 
    constructor() {
        super();        
        this.state = {
        modelImage: model[0] //initially a default 1st image is to be shown
    };
  }
   handleClick(index){
       this.setState({modelImage: model[index]}, () =>{
              console.log(this.state.modelImage)  
       })   
    // in this place state don't have new value 
    // second parameter to function setState is a callback which will be call
    // after state update       
   }

    render() {
        return (
       <div>
            <Navbar />
            <div className="model">
                //Thumbnails
                <div className="model-thumb">
                    {
                        // I suspect error on this line below
                        thumbs.map((thumb, index) =>
                            <img src={thumb} 
                            key={index} 
                            alt="Product-thumb" 
                            width="75px" 
                            onClick={this.handleClick.bind(this, index)} />    
                         )
                    }
                </div>
                <div className="model-image">
                    // Big Image
                    <img src={this.state.modelImage} alt="Product-image"  />
                </div>
            </div>
     </div>
        )
    }
}


//包含所有缩略图变量
var thumbs=[t1、t2、t3、t4]；
//以相同的索引顺序包含较大的图像
var模型=[b1、b2、b3、b4]；
导出默认类显示扩展组件{
构造函数（）{
超级（）；
此.state={
modelImage:model[0]//最初将显示默认的第一个图像
};
}
handleClick（索引）{
this.setState（{modelImage:model[index]}，（）=>{
console.log（this.state.modelImage）
})   
//在这里，状态没有新的值
//函数setState的第二个参数是将被调用的回调
//状态更新后
}
render（）{
返回(
//缩略图
{
//我怀疑下面这行有错误
thumbs.map（（拇指，索引）=>
)
}
//大形象
)
}
}
//React、css和所有图像导入
//包含所有缩略图变量
var thumbs=[t1、t2、t3、t4]；
//以相同的索引顺序包含较大的图像
var模型=[b1、b2、b3、b4]；
导出默认类显示扩展组件{
构造函数（）{
超级（）；
此.state={
modelImage:model[0]//最初将显示默认的第一个图像
};
}
handleClick（索引）{
this.setState（{modelImage:model[index]}，（）=>{
console.log（this.state.modelImage）
})   
//在这里，状态没有新的值
//函数setState的第二个参数是将被调用的回调
//状态更新后
}
render（）{
返回(
//缩略图
{
//我怀疑下面这行有错误
thumbs.map（（拇指，索引）=>
)
}
//大形象
)
}
}

不要在
onClick
方法中传递
index
。因为您已经在父函数中传递了
索引
（即映射方法）

在您的情况下，
index
inside
onClick
方法将作为事件传递

不要在
onClick
方法中传递
index
。因为您已经在父函数中传递了
索引
（即映射方法）

在您的情况下，
index
内部的
onClick
方法将作为事件传递。
您的
img
标记的onClick函数将不会传递索引，而是传递一个
事件。因此，当您尝试
this.setState（{modelImage:model[index]}）
时，它相当于说
this.setState（{modelImage:undefined}）
。如果从为img标记定义onClick属性的括号中删除
索引
，则应该从
映射
函数中引用
索引
的正确值：

//React, css and all the images import

//contains all the thumbnail variable
 var thumbs = [t1, t2, t3, t4];
//Contains the Larger image in the same index order
 var model = [b1, b2, b3, b4];
 
export default class Display extends Component {

constructor() {
    super();        
    this.state = {
        modelImage: model[0] //initially a default 1st image is to be shown
    };
}

handleClick = (index) => this.setState({ modelImage: model[index] });

render() {
    return (
   <div>
        <Navbar />
        <div className="model">
            //Thumbnails
            <div className="model-thumb">
                {
                    // I suspect error on this line below
                    thumbs.map((thumb, index) =>
                        <img src={thumb} 
                        key={index} 
                        alt="Product-thumb" 
                        width="75px" 
                        onClick={ () => { // note: removed "index" variable from these parentheses, which was really an "event"
                            this.handleClick(index) // now index passed here is the current index from the map function
                        }
                         } />    
                     )
                }
            </div>
            <div className="model-image">
                // Big Image
                <img src={this.state.modelImage} alt="Product-image"  />
            </div>
        </div>
 </div>
    )
}
}

//React、css和所有图像导入
//包含所有缩略图变量
var thumbs=[t1、t2、t3、t4]；
//以相同的索引顺序包含较大的图像
var模型=[b1、b2、b3、b4]；
导出默认类显示扩展组件{
构造函数（）{
超级（）；
此.state={
modelImage:model[0]//最初将显示默认的第一个图像
};
}
handleClick=（index）=>this.setState（{modelImage:model[index]}）；
render（）{
返回(
//缩略图
{
onClick={() => {
  this.setState({modelImage: model[index]})
  ...
}

//React, css and all the images import

//contains all the thumbnail variable
 var thumbs = [t1, t2, t3, t4];
//Contains the Larger image in the same index order
 var model = [b1, b2, b3, b4];
 
export default class Display extends Component {

constructor() {
    super();        
    this.state = {
        modelImage: model[0] //initially a default 1st image is to be shown
    };
}

handleClick = (index) => this.setState({ modelImage: model[index] });

render() {
    return (
   <div>
        <Navbar />
        <div className="model">
            //Thumbnails
            <div className="model-thumb">
                {
                    // I suspect error on this line below
                    thumbs.map((thumb, index) =>
                        <img src={thumb} 
                        key={index} 
                        alt="Product-thumb" 
                        width="75px" 
                        onClick={ () => { // note: removed "index" variable from these parentheses, which was really an "event"
                            this.handleClick(index) // now index passed here is the current index from the map function
                        }
                         } />    
                     )
                }
            </div>
            <div className="model-image">
                // Big Image
                <img src={this.state.modelImage} alt="Product-image"  />
            </div>
        </div>
 </div>
    )
}
}