wProps 在反應開發工具中更新，但條件 jsx 無法正確呈現

Question

我無法理解為什么我的子組件沒有從 renderFace 方法更新它的條件 JSX，盡管在反應開發工具中更新了 prop 值並且目標元素的值也在更新（照片 3 和 4 中的“數據圖標”值）。

獲取道具的初始 null 值

獲取數據后填充的道具值

初始道具值

獲取/更新 state 后更新的道具值

正如您從照片中看到的那樣，開發工具中的數據正在更新，但盡管道具值更新，但皺眉並沒有顛倒過來。

SearchBar 是 App 的子組件

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

    this.state = {
      businesses: []
    };
  }

searchYelp(term, location, sortBy) {
    Yelp.search(term, location, sortBy).then(businesses => {
      this.setState({businesses: businesses});
    });
  }

  render() {
    return (
      <div className="App">
        <SearchBar 
          businesses={this.state.businesses} 
          searchYelp={this.searchYelp.bind(this)} />
      </div>
    );
  }
}

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

  this.renderFace = this.renderFace.bind(this);
 }

 renderFace(){
    return (
    this.props.businesses == 0
      ? <h1>Hangry <span className="iconify" data-icon="clarity:sad-face-solid" data-inline="false"></span></h1>
      : <h1>Hangry <span className="iconify" data-icon="bx:bxs-happy-alt" data-inline="false"></span></h1>
    )
  }

handleSearch(event) {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    event.preventDefault();
  }

 componentDidUpdate(){
    this.renderFace();
  }

 return (
      <div className="SearchBar">
        {this.renderFace()} 
      </div>
 )

}

Answer 1

我將問題調試到確定它是邏輯問題還是庫/ src 問題。 我輸入了一些在更新道具時發生變化的文本，推斷問題來自 API。 安裝了圖標的獨立依賴項並且它工作。

npm install --save-dev @iconify/react @iconify-icons/heroicons-outline
import { Icon, InlineIcon } from '@iconify/react';
import emojiHappy from '@iconify-icons/heroicons-outline/emoji-happy';