reactjs - 由于 React.StrictMode 导致问题，React 组件被调用两次

问题描述

我有一个在渲染时被调用两次的组件。我从阅读中假设这是由于，React.StrictMode但我实际上不确定。使用标签调用组件

<UserPlaylist sortMode="new" tracks={this.state.items}/>

wherethis.state.items是一个包含要在UserPlaylist组件中映射的数据的大对象。

用户播放列表组件：

import React, { Component } from 'react'
import Track from '../components/track'

export default class UserPlaylist extends Component {

    async componentDidMount() {
        const sortMode = this.props.sortMode
        const tracks = this.props.tracks

        this.setState({
            sortMode,
            tracks
        });
    }

    render() {
        const mode = this.props.sortMode
        if(mode === "new"){
            console.log("sortMode:","new");
            return(
                <>
                {this.state.items.map(track => <Track key={track.id} trackObj={track}/>) }
                </>
            )
        }
        else{
            console.log("sortMode:",mode);
            return(
                <>
                {this.state.items.map(track => <Track key={track.id} trackObj={track}/>) }
                </>
            )
        }
    }
}

问题在于 react 似乎试图在this.state.items定义之前渲染一次。导致UserPlaylist组件尝试映射undefined项目。

为什么会这样？我应该做什么？这是编写可排序组件的最佳方式吗？

PS他们现在都故意返回相同的东西。在实践中，该new模式将返回相同的数组但相反。我还计划添加一些其他“模式”。

标签： reactjs

您尚未显示设置items状态的部分。（它应该使用tracks状态吗？）但是假设正在某处完成，我认为您的代码大部分都很好，而且通常这是进行排序列表的好方法。

对于尚未初始化状态null的情况，我建议添加一种“正在加载”视图（或仅使用不渲染）。items例如：

render() {
    if (!this.state.items) {
      return null;
    }
    
    const mode = this.props.sortMode
    if(mode === "new"){
        console.log("sortMode:","new");
        return(
            <>
            {this.state.items.map(track => <Track key={track.id} trackObj={track}/>) }
            </>
        )
    }
    else{
        console.log("sortMode:",mode);
        return(
            <>
            {this.state.items.map(track => <Track key={track.id} trackObj={track}/>) }
            </>
        )
    }
}

reactjs - 由于 React.StrictMode 导致问题，React 组件被调用两次

问题描述

解决方案

推荐阅读