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

【问题标题】：How to get React to update component and run function on component update?如何让 React 更新组件并在组件更新时运行功能？
【发布时间】：2018-10-06 15:35:14
【问题描述】：

我正在尝试构建一个简单的股票行情应用程序。输入 AAPL、TSLA、GOOG 等符号并显示所有 3 个的当前价格。

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

如何让我的组件在表单提交时更新？在StockList 中，我的道具包含从我的主要App 组件传递下来的符号名称。我再次通过道具将它们传递给StockInfo，在那里我运行getStock() 进行API 调用以获取价格。这在第一次通过时效果很好，但只要我输入更多股票，除非setInterval 运行，否则组件不会更新。我在StockInfo 中运行this.setState，但这似乎并不重要。

我错过了什么？

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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

参考链接here

【讨论】：

我尝试将 getDerivedStateFromProps 放在 StockInfo 组件中，甚至在每个道具更改时更新状态，但它没有按预期工作。我认为它会在每次提交表单时更新 StockInfo，但如果仍然等待 15 秒的时间间隔。
你能用你在getDerivedStateFromProps中的代码更新帖子吗
使用 getDerivedStateFromProps() 更新了 StockInfo。它将在第一个股票输入时更新，第二个股票输入只会在调用 setInterval 时更新，从不在表单提交时更新。有什么建议吗？

【解决方案2】：

假设你使用的是最新版本的 React，你可能需要观察 props 的变化。查看 getDerivedStateFromProps 方法的文档

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

以前使用过 componentWillReceiveProps()，但它被认为是不安全的，将在即将到来的更新中标记为已弃用

希望对你有帮助

【讨论】：

【解决方案3】：

您还需要在表单输入中设置股票：

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

一旦您在输入更改时设置状态，它将重新渲染/更新您的组件。

【讨论】：

表单工作正常。我可以在 onchange 和 onsubmit 上将项目传递给 StockList。这是从 StockList 到 StockInfo 的问题。
那你应该看看新的 react 新生命周期方法 getDerivedStateFromProps（前提是你使用的是最新版本的 React）或 componentWillRecieveProps（如果是旧版本的 React）