0

我正在构建一个反应应用程序，我遇到了以下问题：

我有一个博客。该博客是使用这样的类组件实现的：

class Blog extends Component {

    constructor() {
        super();

        this.state = {
            blogPosts: [],
            newPost: {
                title: null,
                body: null
            },
            editPostId: null,
            accessToken: null,
            file: null,
            currentPagePosts: [],
            pageSize: 5
        };

        this.changeHandler = this.changeHandler.bind(this);
        this.submitHandler = this.submitHandler.bind(this);
        this.clearForm = this.clearForm.bind(this);
        this.readMoreClicked.bind(this);

        this.postTitleRef = React.createRef();
        this.postBodyRef = React.createRef();
        this.selectedFileRef = React.createRef();
    }
...
    readMoreClicked(postId) {
        const post = this.state.blogPosts.find(p => p.id === postId);
        post.collapsed = false;
        this.setState({blogPosts: this.state.blogPosts});
    }

    createTable() {
        return this.state.blogPosts.length
            ? <Table
                posts={this.state.currentPagePosts}
                isLoggedIn={!!this.state.accessToken}
                editPost={this.editPost}
                readMoreClicked={this.readMoreClicked} />
            : null;
    }
...
}

该组件基本上维护了一个博客文章表，如下所示：

在此处输入图像描述

问题是阅读更多...链接。在上面的代码片段中，我将 read more 链接的处理程序传递到 createTable() 中的博客表。Table 组件是一个功能组件。它看起来像这样：

function Table(props) {
...
    return (
...
        <div className="read-more-link-container">
            <span className="read-more-link" onClick={() => props.readMoreClicked(id)}>
                Read more...
            </span>
        </div>
...
    )
}

当有人点击阅读更多链接时，它会调用博客组件中的 readMoreClicked() 方法（也在上面的代码片段中）。但在 readMoreClicked() 方法中，它告诉我状态未定义：

在此处输入图像描述

这让我想知道博客组件的状态是否不一定会因为您从功能组件调用其中的方法而进入范围。<--这是问题吗？还是有其他事情发生？

谢谢。

4

2 回答 2

0

尝试添加一段代码

super(props) {
   ....
   this.readMoreClicked.bind(this);
   ....
   this.state = {};
}

并在超级构造函数上定义你的状态

于 2021-01-05T03:55:29.937 回答
0

我实施了这个 hack 来解决问题，但它是一个 hack，我仍然希望有人能提供更好的解决方案：

首先，我在 Table 组件中添加了一个“那个”道具：

    createTable() {
        return this.state.blogPosts.length
            ? <Table
                posts={this.state.currentPagePosts}
                isLoggedIn={!!this.state.accessToken}
                editPost={this.editPost}
                readMoreClicked={this.readMoreClicked}
                that={this} /> // <------------- HERE
            : null;
    }

其次，我将 prop.that 从 Table 组件传递给 readMoreClicked() ，如下所示：

<div className="read-more-link-container">
  <span className="read-more-link" onClick={() => props.readMoreClicked(id, props.that)}>
    Read more...
  </span>
</div>

这行得通。博客组件的状态现在通过引用 that.state 在 readMoreClicked() 中可用。

但这显然是一个 hack。有人知道更好的解决方案吗？

于 2021-01-06T02:25:02.313 回答