反应成分引起混乱

Question

我被一些行为弄糊涂了，不知道是否有人能帮忙。我有一个React组件，它根据通过道具传入的过滤器获取电影数据。使用控制台。日志我可以看到我的componentDidMount（）只被调用一次，但是每次由于接收到不同的道具而重新呈现组件时，仅在componentDidMount（）中设置的状态变量都会更改。我的代码很长，所以我不想全部发布，但如果需要，我可以发布。下面是引起我困惑的片段：

class MoviesList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
                        filterList : [], filter: {}
        };
    }
    async componentDidMount() {
        console.log("shouldOnlyCallOnce");
        if( this.props.filter.on) {
            if (this.props.filter.type == "title"){
                try {
                    const url = "mycustomapi.com/api/"+this.props.filter.title;
                    const response = await fetch(url);
                    const jsonData = await response.json();
                    jsonData.sort((a, b) => a.title.localeCompare(b.title));
                    console.log("??");
                    this.setState({filterList: jsonData, filter: this.props.filter});
                }
                catch (error) {
                    console.error(error);
                }
            }

尽管如此。过滤器仅在整个组件中设置，每次重新加载我的组件时它都会更改。有人知道如果不多次记录控制台日志，这是怎么发生的吗？

Answer 1

当组件执行初始化渲染时，将触发组件。道具或状态更改后，ComponentdiUpdate将触发。请查看链接：反应生命周期示例

Answer 2

在我看来，唯一的解释是您正在修改这个组件之外的过滤器的内容。

考虑一下：

let filterA = { title: 'foo' }

let filterB = filterA
console.log(filterB.title) // Shows 'foo'

filterA.title = 'bar'
console.log(filterB.title) // Shows 'bar'

尽管我们从未在这里直接修改过filterB，但值发生了变化。这是因为filterA和filterB引用同一个对象，所以它们当然都会更改。

如果您在本例中将筛选器作为道具传递，然后在父级中修改筛选器，则子级中的筛选器也会发生更改。

作为旁注：您所做的被称为从道具派生状态，这意味着您正在使用道具来设置状态。这几乎从来都不是好的做法。https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html