Question

我正在尝试构建一个简单的股票行情自动收录器应用程序。输入AAPL，TSLA，GOOG之类的符号，并显示所有3种的当前价格。

问题是，进入第一批库存后，我无法使该组件自动更新。它仅按间隔（通过setInterval 15秒）更新。

如何使我的组件在表单提交时进行更新？在StockList中，我有一些道具，其中包含从我的主要App组件传递来的符号名称。我再次通过道具将它们传递到StockInfo，在其中运行getStock()进行API调用以获取价格。第一次传递可以正常工作，但是只要我输入更多的库存，除非运行setInterval，组件才会更新。我正在this.setState中运行StockInfo，但这似乎无关紧要。

我想念什么？

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

  render() {
    return (
      <div>

        <StockInfo stocks={this.props.symbols} />

      </div>
    );
  }
}

//

class StockInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      symbols: [], 
      text: '', 
      stock: [], 
      time: new Date().toLocaleString() 
    };
  }

  static getDerivedStateFromProps(props, state) {
      return {
        symbols: props.stocks,
      };
  }

  componentDidMount() {
    this.intervalID = setInterval(
      //interval
      () => {this.getStocks()},
      10 * 1000
    );

    this.getStocks();
    console.log("mounting StockInfo")
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  tick() {
    this.setState({
      time: new Date().toLocaleString()
    });
  }

  getStocks() {
    this.tick();

    var symbol_str = "";
    var stock_list = [];
    if (this.state.symbols.length > 0) {
      for (let i = 0; i < this.state.symbols.length; i++) {
        stock_list.push(this.state.symbols[i].text);
      }
    }

    this.setState({symbols: stock_list});
    symbol_str = stock_list.join();

    //stock api call here

  }

  render() {
    return (
      <div>
        <b>The time is {this.state.time}.</b>
        <ul>
          {
            this.state.stock.map((obj, index) =>
              // Only do this if symbols have no stable IDs
              <li key={index}>
                <span className="stock_name">{obj.quote.symbol}</span> - <span className="stock_latest_price">{obj.quote.latestPrice}</span>
              </li>
            )
          }
        </ul>
      </div>
    );
  }
}

Answer 1

要在每次组件更新时更新状态，可以使用 getDerivedStateFromProps 生命周期（如果反应版本> 16），否则可以使用 componentDidUpdate 生命周期。

引用链接here

Answer 2

假设您使用最新版本的React，则可能需要观察道具的变化。查看 getDerivedStateFromProps 方法的文档

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

以前使用过的 componentWillReceiveProps（），但是它被认为是不安全的，在以后的更新中将被标记为已弃用

希望对您有帮助

Answer 3

您还需要在表单输入中设置库存状态：

<form>
  <input onChange={(e) => this.setState({stock: e.target.value})}/>
</form>

一旦setState更改了输入，它将重新渲染/更新您的组件。

如何让React更新组件并在组件更新时运行功能？

3 个答案: