NotFoundError：无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点

Question

我在解决问题时遇到了这个问题，我无法真正解决这个问题：

我在包装器中有一个组件，该组件的状态由获取来更新。根据响应，组件显示出一些不同的东西。

但是，一旦请求完成，就会显示标题中的错误。当我<i className="fas fa-spinner fa-pulse"></i>用一个简单的字符串替换the时，问题就解决了。但是我想在那里渲染<i>标签（或者稍后再做其他事情）。这里有什么解决方案？并且该逻辑甚至应该放置在组件中还是应该放置在容器中？

容器：

class BookingContainer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            booking : null
        };
        this.findBooking = this.findBooking.bind(this);
    }

    findBooking(bookingId) {
        fetch('http://booking.local:8000/api/bookings/' + bookingId, {
                method : 'GET',
                headers : {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Error: ' + response.status);
                        return;
                    }
                    response.json().then ((data) => {
                        console.log(data.data);
                        this.setState({
                            booking : data.data
                        });
                    });
                }
            )
            .catch( (err) => {
                console.log('Error: ', err);
            });
    }

    render() {
        return (
            <Booking booking={this.state.booking}/>
        )
    }

    componentWillMount() {
        this.findBooking(this.props.match.params.id);
    }
}

零件

class Booking extends Component {
    render() {
        return (
            <main className={'l-content l-col'}>
                {this.props.booking ?
                <div className="c-card">
                    <h4>Booking: {this.props.booking.checkIn.iso}</h4>
                    <dl>Some more stuff here...</dl>
                </div> : <i className="fas fa-spinner fa-pulse"></i> }
            </main>
        )
    }
}

Answer 1

将真棒字体包裹在另一个HTML标签中。

Font Awesome将其替换为SVG，因此当React删除它时，因为它已成为React的其他错误。看来您可以摆脱编辑组件内容的麻烦，而不能编辑组件本身。

还有一个react-fontawesome npm软件包，它比包装图标要干净一些

https://www.npmjs.com/package/react-fontawesome