Question

我是React的新手。在我的CRUD应用程序中，我有一个 Main 组件。然后在列表组件中，我进行API调用以从服务器加载项目。问题是，在创建组件中提交新项目后，我需要刷新列表，以便查看添加的新项目。什么是可能的非助焊剂解决方案？

Main.jsx

export default class Main extends React.Component {
constructor(props, context) {
    super(props, context);

    this.state = {
        showModal: false,
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
}

openModal() {
    this.setState({showModal: true});
}

closeModal() {
    this.setState({showModal: false});
}

render() {
        return (
            <div>
                <div class="navbar">
                     <div class="nav-item"onClick={this.openModal}>Create</div>
                </div>

                <div class="modal" show={this.state.showModal} onHide={this.closeModal}>
                  <div class="modal-body">
                      <Create onItemCreate={this.closeModal}/>
                  </div>
                </div>

                <List />

            </div>
        );
    }
}

更新：

List.jsx

export default class List extends React.Component {

constructor(props, context) {
    super(props, context);

    this.state = {
        items: []
    };
}
refreshList() {
    $.ajax({
        url      : apiPrefix,
        dataType : 'json',
        type     : 'GET',

        success: data => {
            this.setState({items: data.items});
        },

        error: (xhr, status, err) => {
            console.error(apiPrefix, status, err.toString());
        }
    });
}

render() {
    if( this.state.findings === undefined ) {
        return <div>Loading...</div>
    } else {
        return(
            <div>
                <div>
                    {
                        this.state.findings.map((item) => {
                            return <Item key={item._id} item={item} />
                        })
                    }
                </div>
            </div>

        );
    }
}

componentWillMount() {
    this.refreshList();
}

}

Create.jsx

export default class Create extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {

        };
    }

    // Perform a post request to save a formData
    onSubmit({formData}) {
        formData.type = this.state.selectValue;
        axios.post(apiPrefix, formData)
            .then(() => {
                this.closeModal();
                // THIS LIST NEED TO BE REFRESHED
            });
    }

    closeModal() {
        this.props.onFindingCreated();
    }


    render() {
        return (
            <div>
                <div class="form"></div>
            </div>
        )
    }
}

Answer 1

当您的控件到达“创建”页面时，您可以在渲染中有条件地将其检查为： -

创建一个变量，该变量将在您首先加载创建页面时最初存储您的状态

render{
if(var==null) //will load your var when this class will run first
{
var=this.props.onItemCreate.showModal
return()..
}
else if(this.props.onItemCreate.showModal!=var and var!=null)
{
var=[] //empty variable and update it to new props
var=this.props.onItemCreate.showModal
}
}

或者您可以使用您的子类中的 componentWillReceiveProps 并检查道具是否已更新，然后只需将您的状态设置为该道具，因此您的列表也

如何从ReactJS中的另一个组件触发页面刷新？

1 个答案: