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

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

1 个答案: