Question

我有这个问题与反应有关我无法真正解决这个问题：

我在包装器中有一个Component，通过fetch更新状态。根据响应，组件显示不同的东西。

但是一旦请求完成，标题中的错误就会显示出来。当我用一个简单的字符串替换<i className="fas fa-spinner fa-pulse"></i>时，问题就解决了。但我想在那里渲染<i>标签（或者稍后可能是其他东西）。这里有什么解决方案？这个逻辑是否应该放在Component中，还是应该放在Container中？

集装箱：

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错误。看起来你可以通过编辑组件的内容来逃避，而不是组件本身。

还有一个反应性的fontawesome npm包比包装你的图标更清洁

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

NotFoundError：无法在'Node'上执行'removeChild'：要删除的节点不是此节点的子节点

1 个答案: