在我的智能组件中,我想使用一些方法来设置智能组件的状态。当用户与dumb组件交互时,将触发从智能组件传递下来的方法,并改变我的智能组件的状态
在下面的代码中,我希望 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 dumb组件:
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><{ tag }></pre>
</button>
<p>{ tags[tag] }</p>
</div>
);
})}
<button onClick={ clearHighlight }>Clear</button>
</div>
);
};
PrettyPrintPageSource dumb组件:
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>
);
}
};
最佳答案
您忘记了绑定(bind) clearHighlight
和 setHighlightTag
方法。更改这些行:
constructor(){
....
this.clearHighlight = this.clearHighlight.bind(this);
this.setHighlightTag = this.setHighlightTag.bind(this);
}
关于javascript - 使用传递给dumb组件的方法设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39541302/