如何使用 React 更改 Promise 中的页面答案

【问题标题】：How to change page in a Promise using React如何使用 React 更改 Promise 中的页面
【发布时间】：2016-10-28 23:48:03
【问题描述】：

我正在使用 Reactjs。我有一个表单，它将用一个 name 属性填充我的数据库 onSubmit。假设插入数据成功，我如何跳回到我的承诺中的登陆页面？我的着陆页网址是一个简单的“/”。或者我应该跳回到其他地方而不是在承诺中的登陆页面。

const React = require('react')
const axios = require('axios')

class AddNewRecordLabel extends React.Component {
  constructor (props) {
    super(props)
    this.state = ({
      artists: []
    })
    this.onSubmit = this.onSubmit.bind(this)
  }
  componentDidMount () {
    axios.get('http://localhost:5050/recordLabels')
    .then((res) => {
      this.setState({
        artists: res.data
      })
    })
  }
  onSubmit (e) {
    e.preventDefault()
    if (!this.refs.name.value) {
      console.log('fill in the name input')
    } else {
      var object = {
        name: this.refs.name.value
      }
      axios.post('http://localhost:5050/recordLabels', object)
      .then((res) => {
        //change here
      })
    }
  }
  render () {
    return (
      <div>
        <h3>add new record label</h3>
        <form onSubmit={this.onSubmit}>
          <label>
            <input type='text' ref='name' placeholder='name'/>
          </label>
          <br></br>
          <button type='submit'> Add Record Label </button>
        </form>
      </div>
    )
  }
}

module.exports = AddNewRecordLabel

【问题讨论】：

标签： javascript reactjs navigation promise react-jsx

【解决方案1】：

通常，您会使用通量模式创建一个库，该模式使用调度程序、操作和存储来控制您的组件。如果你想节省大量时间，有一些库使用通量模式，例如 react-redux 和 react-flux。

我以前使用过自制的通量模式。我现在正在使用 redux，根据我的个人经验，它使用起来相当容易，而且开发起来也很快。有很多关于它的文档和来自社区的大量支持。

如果您想保持简单，您可能需要重新考虑您的策略，例如返回消息以替换表单，为他们提供返回主页等选项，甚至离开表单，以便他们有机会添加另一个唱片公司。您还需要检查是否存在错误，并根据响应显示某种消息，说明为什么它不成功。如果您想返回主页，只需将其添加到您的承诺中...

window.location.href = '/'

...但理想情况下，您希望将服务调用移动到另一个文件并返回响应，然后相应地在组件中对这些响应采取行动，但一般推荐的方法是由调度程序和侦听器执行此操作并更新您的此组件中的状态或道具。

【讨论】：