javascript - 使用从 Alphavantage 返回的 axios 对象更新 ReactJS 状态

Question

我需要将一些股票数据传递给名为 Chart 的组件。到目前为止，图表组件仅返回置于此代码顶部的状态中的“测试”值。

它没有设置状态并将新数据传递给图表组件，而是给出错误“TypeError: (intermediate value)(...) is not a function”。

我认为 getTimeSeries 函数需要在渲染方法之外定义，因为该函数需要更新状态。如果是的话，它去哪里了？

我想我需要 .bind(this) 或具有绑定(bind)功能的东西。我不知道。

export default class Main extends React.Component {
state = {
  currentUser: null,
  instr: null,
  instrData: ['test']
};

constructor(props) {
  super(props)
}

componentDidMount() {
  const { currentUser } = firebase.auth()
  this.setState({ currentUser, instr: 'NFLX' });
}

render() {
    const { currentUser } = this.state;

    var getTimeSeries = function(instr){
      if(instr!=null){
      const key = 'myKey';
      var url = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${instr}&apikey=${key}`;
      console.log(url);
        axios.get(url)
          .then((response) => {
            (()=>{ console.log(response.data["Time Series (Daily)"]) })
 // THIS IS NOT UPDATING STATE:
            (()=>{ this.setState({ instrData: response.data["Time Series (Daily)"] }) }) 
            (()=>{ console.log(this.state) })
          })
          .catch((error) => console.log(error));
      };
    }; // end getTimeSeries

return (
      <View style={styles.container}>
        <Text>
          Hi {currentUser && currentUser.email}!
          { getTimeSeries(this.state.instr) }
        </Text>
        <Chart
          instrument={this.state.instr}
          instrData={this.state.instrData}
        />
        <VotingButtons instrument={this.state.instr} />
      </View>
    );//end return
  }// end render
}//end class

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

Answer 1

恐怕有很多东西不在这里。以下是对大问题的快速概述:

• 您正在 render() 方法内触发 axios 调用。成功的 axios 调用将导致状态更新(您的 setState() 调用)，这将导致另一个 render() 调用 - React 组件在其状态时自动重新渲染变化。所以你正在设置一个无限循环。在 componentWillMount() 生命周期方法中执行此操作可能不太危险，但是...
• 尝试像这样在组件状态中存储 AJAX 数据在 React 中有点反模式。它实际上并不应该充当完整的 MVC 系统，它更像是一个 View 。如果你想做这种事情，我强烈建议使用 React 和强大的状态管理系统 - Redux 非常好而且很受欢迎。

• 你的 axios promise 回调都很奇怪，我不明白你想要做什么。

  axios.get(url)
        .then((response) => {
  

到目前为止一切都很好，然后我们......

             (()=>{ console.log(response.data["Time Series (Daily)"]) })

好吧，这就是让我困惑的地方。我期望在这里看到的只是:

             console.log(response.data["Time Series (Daily)"]);

您没有这样做，而是声明了一个执行此操作的函数。但是您还没有调用该函数，您只是声明了它并将其留在那里。而且因为您还没有将它分配给任何东西，所以它并没有真正做太多事情。

            // THIS IS NOT UPDATING STATE:
            (()=>{ this.setState({ instrData: response.data["Time Series (Daily)"] }) }) 
            (()=>{ console.log(this.state) })

这些行也不会执行任何操作，因为您实际上并未执行 this.setState() 或 console.log()，您正在声明将执行的函数他们:

 foo(); //a call to function foo, no args
 () => { foo(); } //a function that calls function foo with no args

希望这有帮助!