Question

因此，我有一个react组件，该组件根据URL指向的位置来呈现不同的锚。基本上，服务器上有一个文件可以是普通文件，也可以是包含URL的文本文件。如果它包含普通文件，我希望href是文件的位置。如果它是带有URL的文本，我希望它指向该URL。我有要显示的这些文件的列表，有时，列表中会填充完全不同的条目，具体取决于状态和一大堆其他内容。所以本质上逻辑是这样的：

listOfFiles.map((file, index) => {
    return (
           <FileAnchor
            file={file}
            methodToCheckFileType={theMethodToCheckFileType}
           />
    );
});

class FileAnchor extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            file: props.file,
            url: null
        }

        this.methodToCheckFileType = props.methodToCheckFileType;
    }

    componentDidMount(){
        this.methodToCheckFileType(this.state.file)
        .then(response => {
            this.setState({
                url: response.url
            });
        })
    }

    render(){
        return this.state.url !== null && (
            <a href={this.state.url}>{this.state.file.filename</a>
        );
    }
}

export default FileAnchor;

在加载第一个列表时效果很好。一切正常。但是，当清空列表并用不同的文件重新填充时，不会删除第一个列表中的条目。我已经调试过了，listOfFiles变量包含所有新文件，而没有旧文件。发送到FileAnchor的道具都是所有新文件。但是，FileAnchor的构造函数不会在第一个调用，而是在第一个列表中有很多条目。如果第一个列表中有4个条目，而下一个列表中有6个条目。前四个将来自第一个列表，后两个将是第二个列表中的最后两个。

那么，基本上，FileAnchor组件被重用了吗？我无法想象为什么将不同的道具发送给他们时会发生这种情况。任何人都可以帮助阐明这一点吗？我觉得这可能是我尚未掌握的ReactJS工作原理的一些基本原则。让我知道您是否需要更多信息。

Answer 1

这可能是由于生命周期方法R CMD check在每个组件实例中仅被调用一次。在这种情况下，我有一种感觉，React将在可能的情况下尝试重用组件实例，这意味着在单个渲染周期中清空/重新填充componentDidMount()时不会调用componentDidMount()。 / p>

尝试将以下方法添加到您的组件中：

listOfFiles

反应不实例化新组件

1 个答案: