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

期望在箭头函数array-callback-return中返回一个值

1 个答案: