React Flash Message：如何在不刷新页面但刷新 200 的情况下显示消息

Question

我想在需要的时间重新加载我的页面时使用 FlashMessage 显示错误（或成功）消息

我正在使用 FlashMessage，我的代码看起来像

render() {
  return (
    {this.state.error ? <FlashMessage duration={5000}><strong>{this.state.error.message}</strong></FlashMessage> : ''}
    //Some table here presenting data
    <Button variant="outline-info" type="submit" size="lg" block className="button-custom" onClick={this.handleSubmit.bind(this)}>
          Submit
        </Button>
  )}

对于我的有状态组件，error 由

加载

handleSubmit(event) {
let data = {
  name: this.state.name,
  unit_price: this.state.unit_price,
  length: this.state.length,
  time: this.state.selectedDate,
  instructor: this.state.instructor,
}
ApiService.postLesson(data)
.then(res => {
  this.setState({
    message: 'Success!'
  });
})
.catch(error => {
  this.setState({
    message: error,
    error: error,
  });
  console.log(error);
})

};

我的ApiService.postLesson是

const instance = axios.create({
  headers: {
    "Content-Type": "application/json",
    Authorization: 'Token ' + localStorage.getItem('token')
  },
});
export default {
  postLesson: data => 
    instance({
        'method': 'POST',
        'url': BACKEND_LESSONS_URL,
        'data': data
    }),
  // some other services

现在我的问题是每次单击提交时，无论是否成功，它都会重新加载页面。因此，我认为我的状态已重新加载并且错误消失了。如果我在 handleSubmit 中添加 event.preventDefault()，那么我可以看到消息，但我在 table 中的内容将不会更新。有什么解决方案？

Answer 1

看来您的方向是正确的，event.preventDefault() 对于您想要实现的目标来说确实是必要的。

因此，您可以通过调用 location.reload():

来刷新页面成功

handleSubmit(event) {
  event.preventDefault();
  let data = {
    name: this.state.name,
    unit_price: this.state.unit_price,
    length: this.state.length,
    time: this.state.selectedDate,
    instructor: this.state.instructor,
  }
  ApiService.postLesson(data)
    .then(res => {
      this.setState({
        message: 'Success!'
      });
      location.reload(); // refreshes the page
    })
    .catch(error => {
      this.setState({
        message: error,
        error: error,
      });
      console.log(error);
    })
}

不清楚为什么 postLesson() 调用成功后需要刷新整个页面并 bootstrap 响应应用程序。但是，您的情况可能有更好的选择：

正在重新获取 table 视图中显示的项目列表
或在 200 响应时向列表中添加新课程

handleSubmit(event) {
  event.preventDefault();
  let data = {
    name: this.state.name,
    unit_price: this.state.unit_price,
    length: this.state.length,
    time: this.state.selectedDate,
    instructor: this.state.instructor,
  }
  ApiService.postLesson(data)
    .then(res => {
      this.setState({
        message: 'Success!'
      });
      // 1. re-fetching list of items
      // ApiService.getLessons().then((lessons) => {this.setState({lessons})})

      // or 2. add newly posted lesson to the list 
      // this.setState({lessons: this.state.lessons.concat(data)})
    })
    .catch(error => {
      this.setState({
        message: error,
        error: error,
      });
      console.log(error);
    })
}

我希望这能给你一些想法。

Answer 2

handleSubmit(event) {
  // to prevent the reload!
  event.preventDefault();
  let data = {
    name: this.state.name,
    unit_price: this.state.unit_price,
    length: this.state.length,
    time: this.state.selectedDate,
    instructor: this.state.instructor,
  }
  ApiService.postLesson(data)
    .then(res => {
      this.setState({
        message: 'Success!'
      });
      // TODO: call the /lessons endpoint and set the state with the result!
      /* WARNING: do not add the lesson manually to the state without fetching
       * the lessons endpoint specifically if more than one person can do the 
       * update because you will see stale data!!!!
       */
    })
    .catch(error => {
      this.setState({
        message: error,
        error: error,
      });
      console.log(error);
    })
}

在 TODO 注释中，调用您的主要端点（例如 /lessons）并在状态中设置数据，以便在不刷新整个页面的情况下更新视图！

React Flash Message：如何在不刷新页面但刷新 200 的情况下显示消息

React Flash Message: How to make the message show without refreshing the page but refresh on 200

javascript

flash-message

reactjs