NotFoundError：未能执行“removeChild之”上“节点”：要删除的节点不是此节点的子

Question

我有这个问题有反应我真的不能绕到我的头工作：

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

但是，一旦请求完成从标题错误显示出来。当我用一个简单的字符串替换<i className="fas fa-spinner fa-pulse"></i>问题就解决了。但我想渲染<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标签真棒。

字体真棒与SVG替换它，所以反应过来的时候来删除它，因为它已经成为别的东西作出反应的错误。看来你可以逃脱编辑组件的内容，而不是组件。

还有一个反应，fontawesome NPM包比包装你的图标更清洁了一下

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