ここでthis.setStateを配置する場所は？

Question

サムネイルをクリックして状態を使って表示する拡大版を得ることができるページを作ろうとしています。状態は正常に動作しましたが、サムネイルのonClickに設定しようとすると、エラーメッセージCannot read property 'setState' of undefinedが表示されます。私はそれが実際にこのように機能しない理由を理解することができますが、私がそれを意図した方法で動作させるために物事を整える方法を正確に理解するのは苦労しています。感謝

const WorkThumb = ({work}) => (
    <Col xs={3} md={4}> 
    <WorkImage src={work.metadata.image.imgix_url} onClick={this.setState({selected: work._id})} /> 
    </Col> 
) 

export default class ArtContent extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = {selected: props.works[0]["_id"]}; 
    } 

    render() { 
    return (
     <Row> 
     <Col xs={6}> 
      <Row between="xs" center="xs" middle="xs"> 
      {this.props.works.map((work) => (
       <WorkThumb key={work._id} work={work} /> 
      ))} 
      </Row> 
     </Col> 
     <Col xs={6}> 
      <Selected src={this.props.works.filter((work) => (work["_id"] == this.state.selected))[0].metadata.image.imgix_url} /> 
     </Col> 
     </Row> 
    ) 
    } 
} 

すべてのヘルプ：ここで問題のコードです。

Answer 1

あなたが純粋な関数（すなわち、その引数にのみ依存：なしthisコンテキスト、いかなる状態、同一の入力 - 出力同じ）でなければならないステートレス成分にsetStateを呼び出すことはできません。しかし、ステートフルな親からコールバックを渡すことができます

const WorkThumb = ({work, onSelect}) => (
    <Col xs={3} md={4}> 
    <WorkImage src={work.metadata.image.imgix_url} onClick={() => onSelect(work)} /> 
    </Col> 
) 

export default class ArtContent extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = {selected: props.works[0]["_id"]}; 
    this.selectWork = this.selectWork.bind(this) 
    } 

    selectWork(work) { 
    this.setState(...) 
    } 

    render() { 
    return (
     <Row> 
     <Col xs={6}> 
      <Row between="xs" center="xs" middle="xs"> 
      {this.props.works.map((work) => (
       <WorkThumb key={work._id} work={work} onSelect={this.selectWork} /> 
      ))} 
      </Row> 
     </Col> 
     <Col xs={6}> 
      <Selected src={this.props.works.filter((work) => (work["_id"] == this.state.selected))[0].metadata.image.imgix_url} /> 
     </Col> 
     </Row> 
    ) 
    } 
}