回调中丢失范围，如何有效地使用绑定答案

【问题标题】：lost scope in callback, how to use bind effectively回调中丢失范围，如何有效地使用绑定
【发布时间】：2022-01-06 11:56:49
【问题描述】：

在我的情况下， compareValue 中的 localesCollection 具有旧（未更新）值。状态不是实时的。我以为 bind 是为了拯救我的一天。

// Redux
let localesCollectionValues = useSelector((state: IStore) => state.localesStoreSlice.localesCollectionValues);

const compareValue = (fieldValue: any): void => {
    console.log('compareValue', fieldValue, localesCollectionValues);
}

const attachListeners = () => {
    console.log('attachListeners');
    Object.keys(sdk.entry.fields).forEach((field: string) => {
        const fieldRef: any = sdk.entry.fields[field];
        fieldRef.locales.forEach((localeKey: string) => {     
            fieldRef.getForLocale(localeKey).onValueChanged(compareValue.bind(this));
        });
    });
};

编辑： is 来自直接在回调中使用箭头函数，问题与上述相同

编辑2： 'localesCollectionValues' 的值是代码初始化和处理程序设置时的值。之后它没有更新，它只保留 n 个旧参考。典型的内存指针/范围问题，需要一个方向来解决这个问题。

fieldRef.getForLocale(localeKey).onValueChanged(() => {
   console.log(localesCollectionValues) // <- not real time, 
   // contains old value
});

【问题讨论】：

标签： callback scope bind

【解决方案1】：

事后看来，我只需要按照 React Hooks 的指示进行状态管理，这很有意义：

const [changedLocale, setChangedLocale] = useState('');

useEffect(() => {
    console.log('changedLocale', changedLocale, localesCollection);
    // accurate, real-time
}, [changedLocale, localesCollection]);

const attachListeners = () => {
    Object.keys(sdk.entry.fields).forEach((field: string) => {
        sdk.entry.fields[field].locales.forEach((localeKey: string) => {
            const fieldRef: any = sdk.entry.fields[field];
            fieldRef.getForLocale(localeKey).onValueChanged(() => {
                setChangedLocale(localeKey);
            });
        });
    });
};

【讨论】：