reactjs-从api获取数据

Question

I'm still fairly new to ReactJS, and through the help of the great SO community, I've been building a small exercise that moves items back and forth between two components on a click. These items are coming from data in a json array items=[] that I hard coded into the file. I was wondering how I would go about getting the data from an api, I've read the documentation and know I should do it via the componentDidMount method, however I am getting stuck figuring out how to set the state in the method. The code is below...

class SingleItem extends React.Component {
render() {
    let data = this.props.data;

    return (
        <li onClick={this.props.onClick}>
            <div> {data.name} </div>
        </li>
    );
  }
}

class ItemList extends React.Component {
   render() {
    let itemArr = this.props.allItems;
    let myItems = this.props.items;
    let handleEvent = this.props.handleEvent;

    let listItems = itemArr.map((itemObj) => {
        if (!myItems.includes(itemObj.id)) return null;

        return <SingleItem
            key={itemObj.id}
            data={itemObj}
            onClick={() => handleEvent(itemObj.id)}
        />;
    });

    return (
        <ul>
            {listItems}
        </ul>
    );
  }
}

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

     this.state = {
        data: [],
        boxOne: props.items.map(item => item.id), // init the boxes with 
 itemIds
        boxTwo: []
    };

    this.handleEvent = this.handleEvent.bind(this);
}

handleEvent(itemId) {
    const isInBoxOne = this.state.boxOne.includes(itemId);

    // Heres the magic, if the item is in the first Box, filter it out,
    // and put into the second, otherwise the other way around..
    this.setState({
        boxOne: isInBoxOne
            ? this.state.boxOne.filter(i => i !== itemId)
            : [ ...this.state.boxOne, itemId ],
        boxTwo: isInBoxOne
            ? [ ...this.state.boxTwo, itemId ]
            : this.state.boxTwo.filter(i => i !== itemId)
    });
}
render() {
    return (
        <div className="wrapper">
            <div className="box">
                <ItemList handleEvent={this.handleEvent} items={this.state.boxOne} allItems={this.props.items} />
            </div>
            <div className="box">
                <ItemList handleEvent={this.handleEvent} items={this.state.boxTwo} allItems={this.props.items} />
            </div>
        </div>
    );
  }
 };

var items = [
  {name: "Item 1", id: 1},
  {name: "Item 2", id: 2},
  {name: "Item 3", id: 3},
  {name: "Item 4", id: 4},
  {name: "Item 5", id: 5},
  {name: "Item 6", id: 6}
 ]

ReactDOM.render(
   <App items={items} />,
   document.getElementById('root')
 );

Answer 1

You could do that easily with axios

componentDidMount() {
  axios.get('http://myapi.com/myrequest')
    .then((res) => {       
      this.setState({ data:res.myvalue }); // change state
  })
}

However, to do a more complex app with "global states" between components, dedicated API, etc.. You should use Redux or Meteor

Answer 2

嗨，您可以使用从Java脚本获取api进行api调用，也可以使用promise处理结果。

Answer 3

You can directly call your HTTP in componentDidMount yes. But as your app grows you will want to isolate this logic from the components. Thus your component will be more reusable and more maintainable. Just wait for the promise to fulfill before setting your state with the result.

axios.get('/api/url')
  .then(function (response) {
    this.setState({data: response.data})
  })
  .catch(function (error) {
    this.setState({data: [], error: true})
  })

About the library to make the HTTP requests, you can use axios , or superagent . Anyway I suggest you to use a library that works both on server and client site. So If you want your app to be isomorphic/universal ( rendered by a nodeJS server ), you won't be in trouble.