は）（SETSTATE動的に生成されたコンポーネントに

Question

レッツkeyComponentは、キーワードの文字列をフィルタリングし、イベントハンドラでそれらを返す（それらを切り替え）とthis.state内の状態（targetState）を生成することはできません。問題は、いずれかのキーワードをクリックすると、状態が更新/変更されないということです。私は、console.logを通じてthis.stateで生成されているすべての状態を見ることができます。クリックしただけでは更新されず、エラーもありません。

私はいくつかの助けをいただければ幸いです;-)

import React from 'react'; 
import { render } from 'react-dom'; 
import { sectionUpsert } from '/imports/api/userProgress/upsertMethods.jsx'; 


export default class LetsCheck extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      reference: props.reference, 
      text: props.text, 
      keys: props.keys, 
      CorrectArray: [], 

     }; 
    } 

    handleClick(e, TxtBit, targetState) { 
     console.log(targetState); 
     console.log(this.state.targetState); 
     let tempA = this.state.CorrectArray; 
     let target = targetState; 
     tempA.push(TxtBit); 
     let obj = { [target]: true, } 
     console.log(obj); 
     this.setState(obj); 

     // this.setState({ 
     // CorrectArray: tempA, 
     // [target]: true, 
     // }); 

     console.log(this.state); 

    } 

    handleUnclick(e, TxtBit, targetState) { 
     console.log('unclicked' + TxtBit + index); 
    } 

    componentWillUnmount() { 
     let keys = this.state.keys; 
     let correct = this.state.CorrectArray; 
     let keyWW = keys.filter(function(key){ 
      return !correct.includes(key) && keys.indexOf(key) % 2 === 0 
     }); 
     const secData = { 
      userId: Meteor.userId(), 
      ref: this.state.reference, 
      keyWR: this.state.CorrectArray, 
      keyWW: keyWW, 
      porSect: Math.round((this.state.CorrectArray.length/(keyWW.length + this.state.CorrectArray.length)) * 100), 
     }; 
     sectionUpsert.call(secData); 
    } 

    render() { 
     let keys = this.state.keys; 
     let clicked = this.state; 
     let filter = keys.filter(function(key) { 
      return keys.indexOf(key) % 2 === 0; 
     }); 
     let KeyComponent = this.state.text.map(function(TxtBit, index) { 
      let match = false; 
      let checkMatch = function(TxtBit, filter) { 
       for (var y = filter.length - 1; y >= 0; y--) { 
        if (TxtBit == filter[y]) { 
         match = true 
        } 
       } 
      }; 
      checkMatch(TxtBit, filter); 
      if(match) { 
       targetState = 'KeyBtn' + index; 
       clicked[targetState] = false; 
      return <a href="#" key={ index } style={{ display: `inline` }} onClick={ this.state[index] ?() => this.handleUnclick(this, TxtBit, targetState) :() => this.handleClick(this, TxtBit, targetState) } name={ TxtBit } className={ this.state[index] ? 'clicked': 'unclicked' } > { " "+TxtBit+ " " }</a>; 
      } else { 
       return <div key={ index } style={{ display: `inline` }} className="TxtBit"> { " "+TxtBit+ " " }</div>; 
      } 
     }.bind(this)); 
     console.log(this.state); 
     return(
      <div className="content"> 
       <div className="content-padded"> 
        <div> {KeyComponent}</div> 
        <p> { this.state.CorrectArray.length }/{ this.state.keys.length/2 } </p> 


       </div> 
      </div> 
      ); 
    } 
}; 

Answer 1

はそれらをバインドしてください： this.handleUnclick（これ、TxtBit、targetState）.bind（この）

またはハンドラの矢印機能を使用します... 例：https://blog.josequinto.com/2016/12/07/react-use-es6-arrow-functions-in-classes-to-avoid-binding-your-methods-with-the-current-this-object/

よろしくお願いします。