使用传入哑组件的方法设置状态

Question

在我的智能组件中，我有用于设置智能组件状态的方法。当用户与哑组件交互，从智能型组件传下来的方法将被触发，要改变我的智能组件

在我下面的代码的状态，我想我的setHighlight改变我的state.highlight为字符串onClick。 clearHighlight具有相同的功能，除了它设置this.state.highlight = null。一旦这个状态被设置，this.state.highlight被传递到我的PrettyPrintPageSource为了执行highlightTag中的逻辑。

我的代码目前呈现出这些错误：

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); 
    }