Question

我有一个简单的反应应用程序，可以GET和POST数据到API。这是一个简单的画廊，其中的图片被分类。

第一步，我从API获得所有画廊。这很好。

class Home extends Component {
constructor(props) {
    super(props);
    this.state = {
        galleries: [],
        isLoading: false,
        error: null,
    };
}

componentDidMount() {
    this.setState({ isLoading: true });

    fetch('http://.../gallery')
        .then((response) => response.json())
        .then((data)=>this.setState({galleries: data.galleries, isLoading: false}))
        .catch(error => this.setState({ error, isLoading: false}));
}

render() {
    const {galleries, isLoading, error} = this.state;
    if (error) {
        return <p>{error.message}</p>;
    }

    if (isLoading) {
        return <div className="loader-wrapper"><div className="loader"/></div>;
    }

    return (
        <div className="categories">
            { galleries.length > 0 ? galleries.map((gallery) => {
                return (
                    <Card key={gallery.path}>
                        ...
                    </Card>
                )}) : null
            }          
            <AddCategory/> 
        </div>
    );
}
}

下一步，您可以创建新的图库。

class AddCategory extends Component {
constructor(props) {
    super(props);
    this.state = {
        modal: false,
        galleries: [],
        isLoading: false,
        error: null,
    };

    this.toggle = this.toggle.bind(this);

    this.handleClick = this.handleClick.bind(this);
}

toggle() {
    this.setState({
        modal: !this.state.modal
    });
}

handleClick(event) {
    event.preventDefault();
    this.setState({
        modal: !this.state.modal
    });
    this.setState({ isLoading: true });
    fetch('http://.../gallery', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({"name": this.galleryName.value})
    })
        .then((response) => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('Something went wrong ...')
            }
        })
        .then((data)=>this.setState({galleries: data.galleries, isLoading: false}))
        .catch(error => this.setState({ error, isLoading: false}));
}

render() {
    const {modal, isLoading, error} = this.state;

    if (error) {
        return <p>{error.message}</p>;
    }

    if (isLoading) {
        return <div className="loader-wrapper"><div className="loader"/></div>;
    }

    return (
        <Card className="add">
            <div className="link" onClick={this.toggle}>
                <CardBody>
                    <CardTitle>Add gallery</CardTitle>
                </CardBody>
            </div>
            <Modal isOpen={modal} toggle={this.toggle} className={this.props.className}>
                <div className="modal-header">
                    ...
                </div>
                <ModalBody>
                    <form className="form-inline addCategoryForm">
                        <div className="group">
                            <input type="text" ref={(ref) => {this.galleryName = ref}} id="inputGalleryName" name="galleryName" required/>
                            <label>name of the gallery</label>
                        </div>
                        <Button onClick={this.handleClick} color="success">Add</Button>
                    </form>
                </ModalBody>
            </Modal>
        </Card>
    );
}
}

问题是，点击“添加”按钮后，页面上没有任何反应，但刷新页面后，新图库位于列表中。

您是否知道为什么我在刷新页面后获得新的图库，而不是在点击按钮添加后立即获得？

Answer 1

在没有刷新的情况下，您无法在列表中看到新图库的原因是主要组件（在本例中为Home组件）未被重新呈现，因为其中没有任何更改状态变量，因此它不会更新页面。在使用this.setState的{{1}}方法获得回复后，您对POST的使用仅更新并重新呈现子组件fetch。

在组件上添加以下注释部分，以便重新呈现AddCategory组件。

对于Home组件;

Home

对于class Home extends Component { constructor(props) { super(props); this.state = { galleries: [], isLoading: false, error: null, }; // Add this method binding this.updateGalleries = this.updateGalleries.bind(this); } // Add this method updateGalleries = () => { this.setState({ isLoading: true }); fetch('http://.../gallery') .then((response) => response.json()) .then((data)=>this.setState({galleries: data.galleries, isLoading: false})) .catch(error => this.setState({ error, isLoading: false})); } componentDidMount() { ... } render() { ... return ( <div className="categories"> ... /* Add updateGalleries funtion as props to AddCategory */ <AddCategory updateGalleries={this.updateGalleries}/> </div> ); } }组件;

AddCategory

如何在不刷新页面的情况下显示发布的数据？

1 个答案: