Question

我需要将一些股票数据传递给名为Chart的组件。到目前为止，Chart组件仅返回＆＃34; test＆＃34;值放入此代码顶部的状态。

它不是设置状态并将新数据传递给Chart组件，而是给出错误，＆＃34; TypeError :(中间值）（...）不是函数＆＃34;。

我认为getTimeSeries函数需要在render方法之外定义，因为函数需要更新状态。如果是这样，它会去哪里？

我想我需要.bind（this），或某些具有约束力的东西。我不确定。

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系统，它更像是一个视图。如果你想做这样的事情，我强烈建议使用React和强大的状态管理系统 - Redux非常好用而且很受欢迎。
你的axios承诺回调都很奇怪，而且我没有得到你想要做的事情。
```
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

希望这有帮助！

Answer 2

非常感谢Duncan Thacker。

仍然需要导入日期，但是此工作代码会引入引号并建立烛台图：

Chart.js

Api.js

使用Alphavantage返回的axios对象更新reactjs状态

2 个答案: