javascript - React 组件不重新渲染，尽管 props 中的 Object 发生了变化

Question

我知道，有很多很多类似的问题.. **重复报警!**

但是:我保证，我浏览了所有这些。我现在很确定，这是另一种情况，可能与 Prop 是一个对象有关(根据我在这里阅读的内容)。但无论如何，我无法解决以下问题:

class CsvListDropdown extends Component {
    constructor(props) {
        super(props);
        this.state = { sessions: props.sessions }
        this csvsInSession = this.csvsInSession.bind(this);
    }

    csvsInSession(sessions) {
        return (sessions
            .map(keys => Object.entries(keys)[2][1])
            .map((csv, i) => (
                <option value={csv} key={i}>{csv}</option>
            ))
        )
    }

    render() {
        const { isLoading } = this.props
        if (isLoading) { blablabla.. }
        else {
            return (
                ...
                <select value={this.props.sessions[0].currentCsv}>
                    {this.csvsInSession(this.state.sessions)}
                </select>
                ...
            )
        }
    }
}

export default withTracker(() => {
    const handle = Meteor.subscribe('sessions');
    return {
      isLoading: !handle.ready(),
      sessions: Sessions.find({}).fetch() 
    };
})(CsvListDropdown);

现在，我正在从客户端向 Sessions 集合写入另一个文档，其中包含 .csv 文件名，同时这个新的 csv 文件正在上传到远程服务器。 console.log(this.props.sessions) 给我一个数组，它是最新的。但是组件本身不会重新渲染。

我也不明白的是:console.log(this.state.sessions) 返回undefined。 (注意:状态)

到目前为止我尝试了什么:

• {this.csvsInSession(this.props.sessions)}(注意:props)

• 向父组件添加一个withTracker/State/Props 并传递sessions 对象从 state 或 props 作为子组件的参数，应该重新渲染。

• forceUpdate()

• componentWillUpdate()

同样重要的是:该组件应该大约在同一时间重新呈现另一个组件也重新呈现(显示上传的 CSV 的内容，从微服务返回并写入另一个集合)。后者确实会重新呈现。但是那个下拉菜单不会。啊!

Answer 1

this.state 只会在您调用 this.setState() 时发生变化，而您并没有这样做。您正在使用 props 中的值初始化 state，但仅在首次实例化组件时在构造函数中进行初始化。之后，即使 props 发生变化，您的组件可能会重新渲染，但它显示的内容不会改变，因为 state 尚未更新。

事实上，似乎没有任何理由将数据存储在该组件的状态中。它也可能是一个功能性的展示组件:

function CsvListDropdown(props) {
    function csvsInSession(sessions) {
        return (sessions
            .map(keys => Object.entries(keys)[2][1])
            .map((csv, i) => (
                <option value={csv} key={i}>{csv}</option>
            ))
        )
    }

    const { isLoading } = props;
    if (isLoading) { blablabla.. }
    else {
        return (
            ...
            <select>
                {csvsInSession(props.sessions)}
            <select>
            ...
        )
    }
}

通常您所有的组件都应该是 stateless functional components除非他们出于某种原因特别需要存储内部状态。