Question

我从反应组件（Stats.js）调用API（在Node中）

此函数getName正在传入prop（称为＆＃39; value＆＃39;）为了在MongoDB中查找值。请参阅以下代码：

/* Stats React Component --Stats.js*/
class Stats extends Component {
    constructor(props) {
    super(props);

    this.state = {
       marketdata: [],
       value: '',
       name: ''
    }
    }


  componentDidMount() {
    const {value, name} = this.state;
    this.getName(value);
    this.getData(name);
   }

     getName = (value=this.props.value) => {
       value = value.replace(/"/g,"");
       console.log('Value', value);
       fetch(`/stats?ticker=${value}`)
      .then(res => console.log('Response', res))
      .then(results => {
         this.setState({
             name: results,
    })
    })

}

   componentWillReceiveProps(nextProps) {
      this.setState({value: nextProps.value });
    }


   getData = (name=this.state.name) => {
    fetch(`https://api.coinmarketcap.com/v1/ticker/${name}/?convert=USD`)
    .then(res => res.json())
    .then(results => {
     this.setState({
        marketdata: results,
     })
     })

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



     return (
            <div className="App">
            {marketdata.map(data =>
              <div key={data.id}>
                <span>Price: {numeral(data.price_usd).format('$0.00')} </span>
                <span>24 Hour Volume: {numeral(data["24h_volume_usd"]).format('$0.0a')} </span>
                <span>Pct Change (24 Hrs): {(numeral((data.percent_change_24h)/100).format('0.0%'))} </span>
                <span>Market Cap: {numeral(data.market_cap_usd).format('$0.0a')}</span>
              </div>
            )}
            </div>
        );
    }
}

export default Stats;

作为一个例子，传递的prop（value）看起来像这样＆＃34; BTC＆＃34; - 我可以在开发者控制台中验证状态值是否正常工作

我试图设置＆＃39;名称的状态＆＃39;变量返回的数据 API查找，名为getName的方法。

我还可以在Express中验证在后端正确检索数据。这是我的快递文件，由getName

调用

/* GET coin stats.  stats.js */
router.get('/', (req, res, next) => {
  let ticker = req.query.ticker;
  console.log(ticker);
  Stat.findOne({symbol:ticker})
    .then(function(result) {
      var stats = result;
      console.log(stats.name);
      res.json(stats.name);
    })
    .catch(function(err) {
      console.log('caught error', err.stack)
      res.send({ error: err })
    })
});

注意我在数据库中的数据如下所示：符号：＆＃34; BTC＆＃34;，名称：＆＃34;比特币＆＃34;，因此当用户输入BTC我需要名称将状态设置为＆＃ 39;比特币＆＃34;

如果我这样做http://localhost:3001/stats?ticker=BTC确实会回归＆＃34;比特币＆＃34;

但出于某种原因，名称的状态为＆＃39;当用户输入值并且我的Stats.js组件收到新值时，不会改变。

有人在这看到任何问题吗？

Answer 1

getName和getData仅在componentDidMount中被调用，仅被调用一次。当状态使用componentDidUpdate函数中的新值更新时，您需要在更新componentWillReceiveProps中的值时调用它们。在设置状态

之前还要检查componentWillReceiveProps函数

componentWillReceiveProps(nextProps) {
  if(this.props.value !== nextProps.value) {
      this.setState({value: nextProps.value });
  }
}

componentDidMount() {
    const {value, name} = this.state;
    this.getName(value);
    this.getData(name);
}

componentDidUpdate(prevProps, prevState) { 
  if(this.state.value !== prevState.value) {
      this.getName(this.state.value);
  }
  if(this.state.name !== prevState.name) {
      this.getData(this.state.name);
  }
}

React中的故障设置状态

1 个答案: