我是 React 新手。在我的 CRUD 应用程序中,我有一个 Main 组件。然后在 List 组件中,我进行 API 调用以从服务器加载项目。问题是在 Create 组件中提交新项目后,我需要刷新我的 List 才能看到添加的新项目。什么是可能的非助焊剂解决方案?
主.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>
);
}
}
更新:
列表.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();
}
}
创建.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>
)
}
}
最佳答案
当您的控件到达创建页面时,您可以在渲染中有条件地检查它:-
创建一个变量,用于在首先加载您的创建页面时存储您的初始状态
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 在您的子类中并检查 Prop 是否已更新,然后只需将您的状态设置为该 Prop ,因此您的列表也是
关于javascript - 如何从 ReactJS 中的另一个组件触发页面刷新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44404107/