預期在箭頭函數array-callback-return中返回一個值

Question

我正在使用React.js，並且對於Web開發來說我還是很新的。 我正在嘗試渲染位於componentDidMount方法中的div，但未渲染它們，並且收到警告消息“預計將在箭頭函數array-callback-return中返回值”。 另外，當我console.log(this.state)它僅顯示一個空對象，因此從未設置this.state.renderedStreamingLinks 。 我什至嘗試將this.setState setTimeout只是為了查看它是否正在發生異步問題，但是那也不起作用，所以我不確定如何解決這個問題。 任何幫助將非常感激。

componentDidMount() {
    let renderedStreamingLinks = this.props.streamingLinks.map(streamingLink => {
        fetch(streamingLink.relationships.streamer.links.related)
        .then(data => data.json())
        .then(data => {
            return(
                <div key={streamingLink.id}>
                    {data.data.attributes.siteName}
                </div>
            )
        })
    })
    this.setState({renderedStreamingLinks: renderedStreamingLinks})
}

render() {
    return (
        <div>
            {this.state.renderedStreamingLinks ? this.state.renderedStreamingLinks : ""}
        </div>
    )
}

Answer 1

.then()返回結果是一個承諾。 即，它“承諾”某事會發生或失敗。 沒有返回“實際值”。 如何管理promise回調是在回調內部，何時何地實際獲取值進行賦值。 而且，您的預感是正確的，正在發生異步問題。

componentDidMount() {
    let renderedStreamingLinks = this.props.streamingLinks.map(streamingLink => {
        fetch(streamingLink.relationships.streamer.links.related)
        .then(data => data.json())
        .then(data => {
            const renderedStreamingLinks = (
                <div key={streamingLink.id}>
                    {data.data.attributes.siteName}
                </div>
            );
            this.setState({renderedStreamingLinks: renderedStreamingLinks})
        })
    })

}

render() {
    return (
        <div>
            {this.state.renderedStreamingLinks ? this.state.renderedStreamingLinks : ""}
        </div>
    )
}