在AJAX js调用中动态分配值

I've recently started experimenting with react and I'm trying to push the boundaries (At least in my mind it seems like magic).

我最近开始尝试“反应”，并试图突破界限(至少在我看来，这是一种魔法)。

I'm trying to create a component that posts to a pre-defined API, using a dynamic data structure i.e. I want to pass the data param as a prop. Here is an example of my current AJAX code:

我正在尝试创建一个组件，该组件可以发布到预定义的API，使用动态数据结构，即，我希望将数据param作为一个道具传递。下面是我当前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})
      }
    });
  },

How would I pass the data attribute as a prop in this section of code? I tried doing this as a function i.e:

在这段代码中，如何将数据属性作为道具进行传递?我试着把它作为一个函数

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

And then passing in this to my data attribute as 'this.formData', but this does not seem to provide happiness.

然后将它传递给我的数据属性为'this。形式数据，但这似乎并不能带来幸福。

I tried using vars as well, but the functional method above, made the most sense to me.

我也尝试过使用vars，但是上面的函数方法对我来说是最有意义的。

What is the best way of passing dynamic values to an ajax js call?

将动态值传递给ajax js的最佳方式是什么?

1 个解决方案

#1

Here is an example of how you can pass a dynamic value to the ajax call in React: http://codepen.io/PiotrBerebecki/pen/ZpRyKb

下面是一个示例，说明如何将动态值传递给React中的ajax调用:http://codepen.io/piotrberebec/pen/zprykb

In the example, the parent component App is maintaining a state with an object including urls. The parent component is then providing individual urls to its children (Time and Photo) via props.

在这个例子中，父组件应用程序使用包含url的对象来维护一个状态。然后，父组件通过道具向子组件(时间和照片)提供单独的url。

Here is a full code:

这里有一个完整的代码:

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

#1