Question

我需要在我的React应用程序中附加此数据响应示例。

数据回复

[
  {
    "trackInfo": {
      "id": 1,
      "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"    
  }
]

React JS

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")
);

完整代码示例here
预加载数据here

所以我的问题是，如何使用Ajax在React中附加新数据？

代码示例将非常感谢，谢谢。

Answer 1

我想你要显示一个MusicPlayer列表，所以我改了你的代码： [你需要阅读更多关于状态的反应]

＆＃13;

<form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
  <fieldset>
    <div id="v">
      <label>Name:</label>
      <input type="text" name="fname" required>
      <br>
    </div>
    <div id="email">
      <label>E-mail:</label>
      <input type="email" name="email" required>
      <br>
    </div>
    <div id="message">
      <label>Message:</label>
      <textarea name="message" required></textarea>
      <br>
    </div>
    <div id="discussWhat">
      <label>What would you like to discuss?</label>
      <br>
      <select name="discussWhat" required>
        <option disabled selected value>-- select an option --</option>
        <option>Technical Support</option>
        <option>Billing</option>
        <option>Sales</option>
        <option>Other</option>
      </select>
      <br>
    </div>
    <div id="pickOne">
      <label>Pick one:</label>
      <br>
      <input type="radio" name="pickOne" value="option1" required>
      <label>Option 1</label>
      <input type="radio" name="pickOne" value="option2" required>
      <label>Option 2</label>
      <br>
    </div>
    <div id="selectSome">
      <label>Select all that apply:</label>
      <input type="checkbox" name="selectSome" value="FirstCheckbox">
      <label>First Checkbox</label>
      <input type="checkbox" name="selectSome" value="SecondCheckbox">
      <label>Second Checkbox</label>
      <input type="checkbox" name="selectSome" value="ThirdCheckbox">
      <label>Third Checkbox</label>4
    </div>
  </fieldset>
  <input type="submit" value="Submit">
</form>

＆＃13;

如何在React JS中附加数据

1 个答案: