メソッドをダムコンポーネントに渡して状態を設定する

Question

スマートコンポーネント内に、スマートコンポーネントの状態を設定するメソッドがあります。ユーザーがダムコンポーネントとやりとりすると、スマートコンポーネントから渡されたメソッドがトリガされ、スマートコンポーネントの状態が変更されます

私のコードでは、setHighlightはstate.highlightを文字列onClick。 clearHighlightは、this.state.highlight = nullを設定する以外は同じ機能を持ちます。この状態が設定されると、highlightTagのロジックを実行するために、this.state.highlightが私のPrettyPrintPageSourceに渡されます。

私のコードは現在、これらのエラーを示している。

ここ

warning.js:44Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the HomePage component.warning @ warning.js:44 

warning.js:44Warning: Failed prop type: Required prop `setHighlightTag` was not specified in `TagSummary`. 
    in TagSummary (created by HomePage) 
    in HomePage (created by Connect(HomePage)) 
    in Connect(HomePage) (created by RouterContext) 
    in div (created by App) 
    in MuiThemeProvider (created by App) 
    in App (created by RouterContext) 
    in RouterContext (created by Router) 
    in Router 
    in Providerwarning @ warning.js:44 
warning.js:44Warning: Failed prop type: Required prop `clearHighlight` was not specified in `TagSummary`. 
    in TagSummary (created by HomePage) 
    in HomePage (created by Connect(HomePage)) 
    in Connect(HomePage) (created by RouterContext) 
    in div (created by App) 
    in MuiThemeProvider (created by App) 
    in App (created by RouterContext) 
    in RouterContext (created by Router) 
    in Router 
    in Provider 

は私のコードです：

class HomePage extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      highlight: null 
     }; 
     this.getPageSource = this.getPageSource.bind(this); 
     this.updateURLstate = this.updateURLstate.bind(this); 
     this.highlightTag = this.highlightTag.bind(this); 
     this.clearHighlight = this.clearHighlight(this); 
     this.setHighlightTag = this.setHighlightTag(this); 
    } 

    getPageSource(event) { 
     event.preventDefault(); 
     this.props.actions.getPageSource(this.state.url); 
    } 

    updateURLstate(event) { 
     const url = event.target.value; 
     this.setState({ 
      url 
     }); 
    } 

    setHighlightTag(tag) { 
     this.setState({ 
      highlight: tag 
     }); 
    } 

    highlightTag(pageSource, tag) { 
     if (tag) { 
      let re = new RegExp(tag, "g"); 
      pageSource.replace(re, "<span class='red'>"+ tag +"</span>") 
     } 
    } 

    clearHighlight() { 
     this.setState({ 
      highlight: null 
     }); 
    } 

    render() { 
     return (
      <div> 
       <UrlForm 
        onSearch={ this.getPageSource } 
        onChange={ this.updateURLstate } 
       /> 

       <PrettyPrintPageSource 
        badUrl={ this.props.payload.error } 
        prettyPrintPageSource={ this.props.payload.prettySource } 
        highlighter={ this.highlightTag } 
        tag={ this.state.highlight } 
       /> 
       <TagSummary 
        tags={ this.props.payload.tagData } 
        setHighlightTag={ this.setHighlightTag } 
        clearHighlight={ this.clearHighlight } 
       /> 
      </div> 
     ); 
    } 
} 

TagSummaryダムコンポーネント：

const TagSummary = ({ tags, setHighlightTag, clearHighlight }) => { 
    if (!tags) { 
     return <div />; 
    } 
    return (
     <div> 
      {Object.keys(tags).map((tag) => { 
       return (
        <div key={ tag }> 
         <button type="button" onClick={ setHighlightTag.bind(this, tag) }> 
          <pre>&lt;{ tag }&gt;</pre> 
         </button> 
         <p>{ tags[tag] }</p> 
        </div> 

       ); 
      })} 
      <button onClick={ clearHighlight }>Clear</button> 
     </div> 
    ); 
}; 

PrettyPrintPageSourceダムコンポーネント：

const PrettyPrintPageSource = ({ prettyPrintPageSource, badUrl, highlighter, tag }) => { 
    if (badUrl) { 
     return (
      <div> 
       Bad URL! 
      </div> 
     ); 
    } else { 

     let processedPageSource = highlighter.bind(this, prettyPrintPageSource, tag); 

     return (
      <pre> 
       { processedPageSource } 
      </pre> 
     ); 
    } 
}; 

Answer 1

あなたはバインドclearHighlightとsetHighlightTagメソッドを忘れました。これらの行を変更してください：

constructor(){ 
    .... 
    this.clearHighlight = this.clearHighlight.bind(this); 
    this.setHighlightTag = this.setHighlightTag.bind(this); 
    }