Question

我想避免输入相同的代码行。目前，我有一个应该发出API调用的应用程序，就像这样。

render: function(){
  var processappkey = localStorage.getItem('yourid');
  var weather = new XMLHttpRequest();
  var deesfault = "Houston, Texas";
  weather.open("GET", "http://apidatafromsomewebsiteq="+deesfault+"&units=imperial&appid="+processappkey, false);
  weather.send(null);   
  var r = JSON.parse(weather.response);
  var check = r.main.temp;
  var theunicorn = r.weather[0].icon;

  return (<p>{theunicorn}</p>)
}

我想把它分成这样的东西：

somecontainer: function(){
  var processappkey = localStorage.getItem('yourid');
  var weather = new XMLHttpRequest();
  var deesfault = "Houston, Texas";
  weather.open("GET", "http://apidatafromsomewebsiteq="+deesfault+"&units=imperial&appid="+processappkey, false);
  weather.send(null);   
  var r = JSON.parse(weather.response);
  var check = r.main.temp;
  var theunicorn = r.weather[0].icon;
},

render: function() {
   {this.somecontainer()}

   return (
     <p>{theunicorn}</p>
   )
}

我将在我的应用中从不同区域调用API。更不用说包括一个setInverval，它会让我再次重复代码。

事实上，当我在这里时，我也想知道如何去做这样的事情。

render: function() {
  this.somecontainer();
  setInterval(function() {
    this.somecontainer();
  }, 5000);
}

然而，这是一个不同的问题，我很乐意对第一个问题有所了解。

Answer 1

好问题，很容易回答。只需要一个能够获取所需数据的函数，并通过回调函数返回结果。此实用程序函数将位于某个位置的另一个文件中，您可以导入它并从任何组件调用它。然后，获取函数返回的数据并将其置于组件状态。

您几乎肯定不会在render方法中调用API。 React可以运行render()方法 lot ，具体取决于您的应用。如果您希望在组件首次加载时触发它，请使用componentDidMount（这只会在客户端上触发，如果您正在使用服务器端渲染，则会很方便。）

let counter = 0;
// separate utility

function goGetAUnicorn(callback) {
  // replicate async for demonstration...
  setTimeout(() => {
    callback(`I am unicorn picture #${counter++}`);
  }, 100)
}

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

    this.state = {
      unicornPicture: '',
    };
  }

  componentDidMount() {
    // runs once, client side only
     goGetAUnicorn(unicornPicture => {
       this.setState({unicornPicture});
     });


    // to simulate reusing the same function elsewhere at some other time
    setInterval(() => {
      goGetAUnicorn(unicornPicture => {
        this.setState({unicornPicture});
      });
    }, 1000)
  }

  render() {
    return (
      <div>Here is your unicorn: {this.state.unicornPicture}</div>
    );
  }
}

ReactDOM.render(<Unicorn />, document.getElementById('app'));

我使用setTimeout表示您必须等待响应才能继续。我实际上使用的是承诺，而不是回调，但它们都有效。

这里有一个jsbin玩：https://jsbin.com/lohojo/1/edit?html,js,output

在函数之间绑定反应变量的任何方法？

1 个答案: