Question

我正在使用library处理文件内容。我使用的是function而不是arrow function，因为我需要访问decode method。但是，然后我想将函数的结果设置为组件的状态。但是，当然，在这种情况下，这不再指向该组件。

我不确定该怎么办？

reader.loadFile(file)
                    .then((response) =>  {
                        reader.iterateLines({
                            eachLine: function (raw, progress, lineNumber)  {
                                console.log(this.decode(raw))
                                this.setState({
                                    txtFileContent: this.decode(raw)
                                });
                            },
                        })
                    })
                    .catch( (reason): void => {
                        console.log(this);
                    });

Answer 1

在仍然有能力的情况下将此分配给该对象：

const that = this;

稍后，在此范围内不再是您想要的“ this”，因此您仍然可以调用它的方法。

that.setState(....);

请记住，'那'是一个通用建议，此常量的任何语义名称将是更好的选择。

Answer 2

如果可能，请使用带有useState钩子的功能性react组件，并摆脱上下文问题！ https://reactjs.org/docs/hooks-intro.html

Answer 3

在创建要用作回调的函数时，将this绑定到它，如下所示：

eachLine: (function (raw, progress, lineNumber)  {
    console.log(this.decode(raw))
    this.setState({
        txtFileContent: this.decode(raw)
    });
}).bind(this),

Answer 4

尝试绑定this

this.setState.bind(this, { txtFileContent: this.decode(raw) })

在里面没有箭头功能调用this.setState吗？

4 个答案: