Question

我仍然是ReactJS的新手，并且在伟大的SO社区的帮助下，我一直在构建一个小练习，只需点击一下即可在两个组件之间来回移动项目。这些项来自json数组items=[]中的数据，我将其硬编码到文件中。我想知道如何从api获取数据，我已经阅读了文档并知道我应该通过componentDidMount方法来完成它，但是我很难搞清楚如何设置状态方法。代码如下......

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

您可以使用axios

轻松完成

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

但是，要在组件，专用API等之间使用“全局状态”执行更复杂的应用程序。您应该使用Redux或Meteor

Answer 2

您好，您可以使用java脚本中的fetch api进行api调用，并使用promise来处理结果。

Answer 3

您可以在componentDidMount中直接呼叫您的HTTP。但随着您的应用程序的增长，您将希望将此逻辑与组件隔离开来。因此，您的组件将更可重用且更易于维护。在设置结果状态之前，请等待承诺履行。

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

关于发出HTTP请求的库，您可以使用axios或superagent。无论如何，我建议你使用一个既适用于服务器又适用于客户端站点的库。因此，如果您希望您的应用程序具有同构/通用（由nodeJS服务器呈现），那么您将无法遇到麻烦。

reactjs - 从api获取数据

3 个答案: