Question

我正在使用React，Redux和TypeScript构建一个应用程序。

在顶部导航栏中，我有一个“登录”链接，单击该链接将分派一个动作。目前，此操作仅将名为auth的布尔值设置为true。

我有很多相互连接的组件，这些组件侦听redux存储的auth属性，并根据评估this.props.auth的三元表达式来决定要渲染的子组件。

我很惊讶地看到，当我单击“登录”时，某些组件将按预期方式重新渲染，而另一些组件将成功更改其状态，但是只有刷新页面或离开并返回时，它们才会更改其显示。经过数小时的梳理，我相信我终于隔离了上述两种组件之间的区别：如果计算this.props.auth的三元表达式直接在render()方法内部，则该组件的行为与预期的一样但是，如果三元表达式位于.map()方法内部的render()函数内部，那么这种怪异的行为就会发生，我必须刷新才能使正确的渲染与prop值匹配。这是怎么回事？ this会失去价值吗，这是同步/异步问题吗？

class LatestArticles extends Component<LatestArticlesProps> {

public latestArticlesList: JSX.Element[] = Articles.map((a: IArticle) => {
    return (
        <React.Fragment key={a.id}>
            // some TSX

                        {this.props.auth === true ? <UserImgOverlay /> : <UnlockButton />}

            // some more TSX
        </React.Fragment>
    )
});

public render(): JSX.Element {
    return (
        <React.Fragment>
            // some TSX

                    {this.latestArticles}

            // some more TSX
        </React.Fragment>
    )
}

如果您需要更多背景信息，请告诉我，但我想寻求帮助以了解发生了什么事。为什么如果三元表达式直接位于render()方法内部并且在映射数据的同时有什么方法可以解决，prop更改仅触发重新渲染？谢谢您的关注。

编辑

这是我的mapStateToProps：

// Components/Navbar/index.tsx

const mapStateToProps = ({ articles, auth }: IApplicationState) => {
    return {
        articlesPerPage: articles.articlesPerPage,
        articlesPerPageStep: articles.articlesPerPageStep,
        auth: auth.auth
    }
}

实际上，我有一个onClick方法发生这种行为的另一个例子：

class LatestArticles extends Component<LatestArticlesProps> {

    public latestArticlesList: JSX.Element[] = Articles.map((a: IArticle) => {
        return (
            <React.Fragment key={a.id}>
                // some TSX

                            <StarsRating rating={3} onClick={this.handleRatingClick} />

                // some more TSX
            </React.Fragment>
        )
    });

    constructor(props: LatestArticlesProps & IOwnProps) {
        super(props)

        this.handleRatingClick = this.handleRatingClick.bind(this);
    }

    public render(): JSX.Element {
        return (
            <React.Fragment>
                // some TSX

                        {this.latestArticles}

                // some more TSX
            </React.Fragment>
        )
    }

    public handleRatingClick = () => {
        alert('Clicked!')
    }
}

^当我单击星形时，什么也没有发生，但是如果我从.map函数中提取<StarsRating rating={3} onClick={this.handleRatingClick} />并将其直接放在render（）方法中，则会收到警告，提示“已单击！” ...我怀疑this正在失去价值，但不确定如何测试。

Answer 1

我认为问题出在latestArticlesList变量上。初始化还为时过早。它应该是一个函数：

public latestArticlesList: JSX.Element[] = () => Articles.map((a: IArticle) => {

我假设Articles应该是this.props.articlesPerPage。

最后，当您使用它时，将其命名为：

<React.Fragment>
  // some TSX

  {this.latestArticles()}

  // some more TSX
</React.Fragment>

仅当三元表达式直接位于render（）方法内部

1 个答案: