AJAX jsコールの値を動的に割り当てる

Question

最近私は反応を実験し始めました。境界線を押してみようとしています（少なくとも魔法のように思えます）。

私は、動的データ構造を使用して、すなわち、私は小道具としてデータのパラメータを渡したい事前定義されたAPIに投稿するコンポーネントを作成しようとしています。現在のAJAXコードの例を次に示します。

createModalSubmit(form) { 
    var name = this.refs.name.value; 
    $.ajax({ 
     url: `/items.json`, 
     type: 'POST', 
     data: item:{name: name} , 
     success: (item) => { 
     this.setState({ 
      item: { 
      name: '' 
      }, 
      errors: {}, 
      showModal: false 
     }); 
     }, 
     error: (item) => { 
     this.setState({errors: item.responseJSON.errors}) 
     } 
    }); 
    }, 

このコードセクションでは、データ属性をどのように渡しますか？その後、

formData() { 
    return { 
     myData: { 
     item: { 
      name: name 
     } 
     } 
    } 
    }, 

そして「this.formData」としての私のデータ属性にこの中に渡したが、これは幸福を提供していないようです：私は、関数すなわちとしてこれをやってみました。

私もvarsを使ってみましたが、上記の機能的な方法が私にとって最も理にかなっていました。

動的値をajax js呼び出しに渡す最も良い方法は何ですか？ここ

Answer 1

あなたが反応にAJAX呼び出しに動的な値を渡すことができる方法の例である：例でhttp://codepen.io/PiotrBerebecki/pen/ZpRyKb

、親コンポーネントAppは、URLを含むオブジェクトに状態を維持しています。親コンポーネントは、その子孫（TimeおよびPhoto）に小道具を介して個別のURLを提供しています。ここで

は完全なコードです：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     urls: { 
     time: 'http://date.jsontest.com', 
     photos: 'http://jsonplaceholder.typicode.com/photos' 
     } 
    }; 
    } 

    render() { 
    return (
     <div> 
     <Time url={this.state.urls.time} /> 
     <Photo url={this.state.urls.photos} /> 
     </div> 
    ); 
    } 
} 


class Time extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: null 
    }; 
    } 

    componentDidMount() { 
    $.ajax({ 
     type: "GET", 
     url: this.props.url, 
     success: (response) => { 
     this.setState({ 
      data: response.time, 
     }); 
     } 
    }); 
    } 

    render() { 
    let content; 

    if (this.state.data) { 
     content = (
     <div> 
      <h1>Current Time</h1> 
      <p>{this.state.data}</p> 
     </div> 
    ); 
    } else { 
     content = <div>Loading...</div>; 
    } 

    return (
     <div> 
     {content} 
     </div> 
    ); 
    } 
} 

class Photo extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: null 
    }; 
    } 

    componentDidMount() { 
    $.ajax({ 
     type: "GET", 
     url: this.props.url, 
     success: (response) => { 
     this.setState({ 
      data: response, 
     }); 
     } 
    }); 
    } 

    render() { 
    let content; 

    if (this.state.data) { 
     content = (
     <div> 
      <h1>Photo</h1> 
      <img src={this.state.data[0].url}/> 
     </div> 
    ); 
    } else { 
     content = <div>Loading...</div>; 
    } 

    return (
     <div> 
     {content} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, document.getElementById('content') 
);