javascript - 如何在 React JS 上通过 Ajax 发布新数据

Question

考虑这个example

我对 React 很陌生，所以这就是我创建新应用程序的方式

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = { //initial empty details
      details : {}
    }
  }
  componentDidMount(){
    //place the ajax call where ever you need
    $.ajax() //call ajax
    .done((data) => {
      this.setState({ //this setState will re render the UI with the new state
        details: { //change the key value pairs as needed
          id: data.id,
          trackInfo: {
            title: data.title,
            artist: data.artist,
            album: data.album,
          },
          trackUrl: data.trackUrl,
          albumArt: data.albumArt,
        }
      })
    })
  }
    render() {
      if(!this.state.details.id) return false //renders nothing when no details available
        return (
            <div id="app">
                <MusicPlayer
                    id={this.state.details.id}
                    visualizerType="RIPPLES"
                    theme={darkTheme}
                    trackInfo={this.state.details.trackInfo}
                    trackUrl={this.state.details.trackUrl}
                    albumArt={this.state.details.albumArt}
                    utilities={true}>
                </MusicPlayer>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);

计划是创建一个按钮，单击它会显示一个新的 MusicPlayer 元素。例如。

<MusicPlayer
    id="3"
    visualizerType="RIPPLES"
    theme={lightTheme}
    trackInfo={{
        title: "Guns & Dogs",
            artist: "Portugal, The Man",
                album: "The Satanic Satanist"
    }}
    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Portugal.+The+Man+-+Guns+%26+Dogs+-+The+Satanic+Satanist.mp3"
    albumArt="http://ecx.images-amazon.com/images/I/61X7CiBpZ6L.jpg"
    utilities={true}>
</MusicPlayer>

如何通过 Ajax 将新的 JSON 数据正确 POST 到渲染器？

Answer 1

假设你原来的 ES6/JSX 看起来像这样:

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            details: {},
        };
    }

    componentDidMount() {
        $.ajax() // call ajax
        .done(data => {
            this.setState({ // this setState will re render the UI with the new state
                details: { // change the key value pairs as needed
                    id: data.id,
                    trackInfo: {
                        title: data.title,
                        artist: data.artist,
                        album: data.album,
                    },
                    trackUrl: data.trackUrl,
                    albumArt: data.albumArt,
                },
            });
        });
    }

    render() {
        return (
            <div>
                <MusicPlayer
                  {...{
                      id: this.state.details.id,
                      visualizerType: 'RIPPLES',
                      theme: darkTheme,
                      trackInfo: this.state.details.trackInfo,
                      trackUrl: this.state.details.trackUrl,
                      albumArt: this.state.details.albumArt,
                      utilities: true,
                  }}
                />
            </div>
        );
    }
}

并且您希望在单击按钮时再次调用 $.ajax 来获取一些新的玩家数据。您需要为可以更新组件状态的单击处理程序创建一个方法。这看起来像:

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            details: {},
        };

        // this is important so that the getNewData method will have the correct "this" context on click
        this.getNewData = this.getNewData.bind(this);
    }

    componentDidMount() {
        $.ajax() // call ajax
        .done(data => {
            this.setState({ // this setState will re render the UI with the new state
                details: { // change the key value pairs as needed
                    id: data.id,
                    trackInfo: {
                        title: data.title,
                        artist: data.artist,
                        album: data.album,
                    },
                    trackUrl: data.trackUrl,
                    albumArt: data.albumArt,
                },
            });
        });
    }

    getNewData(e) {
        e.preventDefault();

        // any logic to set up url or params for the ajax call can be done here

        $.ajax() // call ajax
        .done(data => {
            this.setState({ // this setState will re render the UI with the new state
                details: { // change the key value pairs as needed
                    id: data.id,
                    trackInfo: {
                        title: data.title,
                        artist: data.artist,
                        album: data.album,
                    },
                    trackUrl: data.trackUrl,
                    albumArt: data.albumArt,
                },
            });
        });
    }

    render() {
        return (
            <div>
                <MusicPlayer
                  {...{
                      id: this.state.details.id,
                      visualizerType: 'RIPPLES',
                      theme: darkTheme,
                      trackInfo: this.state.details.trackInfo,
                      trackUrl: this.state.details.trackUrl,
                      albumArt: this.state.details.albumArt,
                      utilities: true,
                  }}
                />

                <button onClick={this.getNewData}>Click me!</button>
            </div>
        );
    }
}

这是实现您想要的目标的简单方法，但数据已本地化到该组件。如果您有一个复杂的应用程序，您可能希望使用 Redux 和异步操作或中间件来完成此操作，但这需要更复杂的应用程序设置。