Javascript React Jsx-如何为随机报价生成器钩住RxJs单击事件？

这是我的组件，非常简单，一个报价生成器。非常有趣，因为整个站点刷新时引用会刷新。所以在这种情况下，我们希望有一个onClick（）事件来触发我们的事件，并重新生成组件？到目前为止，我得到的是：

import React from 'react';
import { of } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { map, catchError } from 'rxjs/operators'
import IQuote from '../../contracts/IQuote';

class QuoteComponent extends React.Component {
    private subscription: any;
    public state: any;

    constructor(props) {
        super(props);
        this.state = {
            content: undefined, 
            originator: {
                id: undefined,
                language_code: undefined,
                content: undefined,
                url: undefined,
                originator: undefined,
                name: undefined,
                tags: undefined
            }
        }
    }

    fetchNewQuote() {
        let url = "https://quotes15.p.rapidapi.com/quotes/random/?language_code=en";
        let headers = {
            "x-rapidapi-host": "quotes15.p.rapidapi.com",
            "x-rapidapi-key": "<<API KEY>>"
        };

        const observable$ = ajax.getJSON(url, headers)
          .pipe(
            map(response => response),
            catchError(error => of(error))
          )

        this.subscription = observable$.subscribe((result) => {
            this.setState(result)
        });
    }

    componentDidMount() {
        this.fetchNewQuote();
    }

    componentWillUnmount() {
        this.subscription.unsubscribe();
    }

    render () {

        function onClickHandler(e) {
            e.preventDefault();
            this.fetchNewQuote(); {/* problem! */}
        }

        return (
                <div className="streak-view streak streak-lg streak-photo">
                    <div className="streak-pattern flex-center pattern-6 mask">
                        <ul className="white-text smooth-scroll">
                            <li>
                                <h2 onClick={onClickHandler} className="h2-responsive wow fadeIn" style={{visibility: "visible", animationName: "fadeIn", fontSize: "20px"}}>
                                    <i className="fa fa-quote-left" aria-hidden="true"></i>
                                        &nbsp;{this.state.content}&nbsp;
                                    <i className="fa fa-quote-right" aria-hidden="true"></i>
                                </h2>
                            </li>
                            <li><h5 className="text-center font-italic wow fadeIn" data-wow-delay="0.2s" style={{visibility: "visible", animationDelay: "0.2s", animationName: "fadeIn"}}>
                                &nbsp;-&nbsp;{this.state.originator.name}
                                </h5>
                            </li>
                        </ul>
                    </div>
                </div>
        )
    }
}

export default QuoteComponent;

从“React”导入React；
从“rxjs”导入{of}
从'rxjs/ajax'导入{ajax}
从“rxjs/operators”导入{map，catchError}
从“../../contracts/iNote”导入iNote；
类QuoteComponent扩展了React.Component{
私人认购：任何；
公共国家：任何；
建造师（道具）{
超级（道具）；
此.state={
内容：未定义，
发起人：{
id：未定义，
语言代码：未定义，
内容：未定义，
url:未定义，
发起人：未定义，
名称：未定义，
标签：未定义
}
}
}
fetchNewQuote（）{
让url=”https://quotes15.p.rapidapi.com/quotes/random/?language_code=en";
让标题={
“x-rapidapi-host”：“quotes15.p.rapidapi.com”，
“x-rapidapi-key”：”
};
const observable$=ajax.getJSON（url、标题）
.烟斗(
映射（响应=>响应），
catchError（错误=>of（错误））
)
this.subscription=可观察的$.subscripte（（结果）=>{
此.setState（结果）
});
}
componentDidMount（）{
this.fetchNewQuote（）；
}
组件将卸载（）{
this.subscription.unsubscripte（）；
}
渲染（）{
函数onClickHandler（e）{
e、 预防默认值（）；
this.fetchNewQuote（）；{/*问题！*/}
}
返回(


{this.state.content}


-{this.state.originator.name}


)
}
}
导出默认QuoteComponent；

如果我理解你的问题。。。你可以这样做：

render () {
    // make this an arrow function so "this"
    // references the class instead of the function handler itself
    const onClickHandler = (e) => {
        e.preventDefault();
        this.fetchNewQuote();
    };
...

---

抱歉，您是问如何使其在单击时刷新？如果是这样，那么只需在onClickHandler中调用

this.fetchNewQuote（）

。这正是我最初想做的，但出于某种原因，typescript编译一直返回此错误：

Uncaught TypeError:无法读取未定义的属性“fetchNewQuote”

您必须更改fetchNewQuote（）在类上添加一个箭头函数，以避免出现这种情况

fetchNewQuote=（）=>{}

。