如何更新在承諾內的承諾外聲明的變量？

Question

在我的組件中，我有一個名為destination的變量，並將其分配為空字符串。 然后我有一個返回承諾的函數，我將響應傳遞給另一個函數，然后我在Object.assign使用返回的對象。 我使用新對象來更新我在 promise 之外創建的destination變量。

 render() { return ( <div className='destinations-container'> { Object.keys(this.state.destinations).map((id) => { var destination = ""; getFormSchema(this.state.destinations[id].product_type) .then( (response) => { let defaultConfig = setDefaultConfig(response.data); destination = Object.assign(defaultConfig, this.state.destinations[id]); }); return <Widget name={destination.name} textlinks={this.createWidgetTextLinks(destination)} state={getDestinationState(this.state.metadata[id] || {})}> <WidgetInfo> {widgetOverviewStaticInformation(destination, this.state.productList)} {metadataOverviewItemsToShow(this.state.metadata[id] || {})} </WidgetInfo> <EditDestinationForm destination={destination}/>; </Widget> }) } </div> ) }

問題是目標變量仍然為""即使在為它分配了在承諾中從Object.assign返回的對象之后。 這使我相信， destination的承諾內部變量和destination指定為承諾外空字符串變量我是兩回事。

如何更新我在承諾中聲明為空字符串的變量？

Answer 1

destination變量可能具有您期望的行為。

我問你這個問題：你怎么知道destination沒有更新？

• 您是否打開了調試器並在then回調中放置了一個斷點？
• 或者您是否根據瀏覽器窗口中呈現的值得出結論？

在第二種情況下，我希望您注意您的第二次回報也在承諾之外：

它肯定會在承諾解析之前呈現 Widget 組件。

Answer 2

這是一個時間問題：當 map 中的方法返回時，promise 沒有解決（它們是異步的）。 我建議您通過使用組件的內部狀態（在 promise 回調上更新）來使用不同的方法：

// this can be in any method in the class, not just in render (it's better not to have it in render).
Promise.all(
    Object.keys(this.state.destinations)
        .map(id => getFormSchema(this.state.destinations[id].product_type))
).then(decoratedDestinations => this.setState({decoratedDestinations}));

//in the render:
return (
    <div className='destinations-container'>
        {this.state.decoratedDestinations.map(decoratedDestination => (
            <Widget name={decoratedDestination.name} ... >
                ...
            </Widget>
        )}
    </div>
);

通過這種方式，當 promise 解析 react 將使用您需要的所有數據自動重新渲染您的組件。

Answer 3

Destination正在更新，只是沒有顯示。 您在 promise 完成之前從該函數返回，因此它將使用它具有的任何值進行渲染。 我同意@imrok，你不應該在渲染中做出這樣的承諾。 將承諾放在它外面，並在它完成時更新組件的狀態，這將導致使用您想要的值重新渲染。