如何更新在 Promise 内的 Promise 之外声明的变量？答案

【问题标题】：How to update a variable that was declared outside a promise inside a promise?如何更新在 Promise 内的 Promise 之外声明的变量？
【发布时间】：2020-03-25 23:43:24
【问题描述】：

在我的组件中，我有一个名为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 返回的对象之后。这让我相信，promise 中的destination 变量和我在promise 之外分配为空字符串的destination 变量是两个不同的东西。

如何更新我在 promise 中声明为空字符串的变量？

【问题讨论】：

为什么字符串不在引号中？

标签： javascript reactjs object promise

【解决方案1】：

destination 变量可能具有您期望的行为。

我问你这个问题：你怎么知道destination 没有更新？

您是否打开了调试器并在then 回调中放置了断点？
或者您是否根据浏览器窗口内呈现的值得出结论？

在第二种情况下，我希望您注意，您的第二次回报也不在承诺范围内：

它确实会在 promise 解析之前渲染 Widget 组件。

【讨论】：

所以我应该把小部件放在承诺中？
我会说是的，但不会忘记在其上添加 key 属性。但我不认为组件模板中的 Promise 真的是一个好习惯。 当你的承诺解决时，你应该使用父组件的state 属性和this.setState() 方法。

【解决方案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 会自动用你需要的所有数据重新渲染你的组件。

【讨论】：

【解决方案3】：

Destination 正在更新，只是没有显示。你在 Promise 完成之前从那个函数返回，所以它会呈现它所具有的任何值。我同意@imrok，你不应该在渲染中做出那个承诺。将 promise 放在它外面，让它在完成时更新组件的状态，这将导致使用您想要的值重新渲染。

【讨论】：