如何在反應中有條件地渲染元素

Question

我正在為此子頁面使用 mobx + react 設置來制作可搜索的用戶列表。 我的項目列表未使用 if 語句呈現。 在解決方案中，我試圖在我的子頁面中呈現兩個列表之一。 取決於布爾值“isSearching”。 當輸入字段為空時應顯示第一個元素，當輸入字段寫入值時應顯示第二個元素。 它們是相同的數組，列表數組之間的唯一區別是其中一個被過濾了。

代碼：

 <ul className='items__block'>
    {
        this.props.PeopleStore.people.isSearching = false ?
            (this.props.PeopleStore.people.map(this.person))
        : 
            (this.props.PeopleStore.searchingList.map(this.person))
    }
</ul>

雖然如果我刪除條件，它會分開工作：

<ul className='items__block'>
    {
       this.props.PeopleStore.people.map(this.person)
    }
</ul>


<ul className='items__block'>
    {
       this.props.PeopleStore.people.map(this.person)
    }
</ul>

存儲文件：

 import { runInAction, observable, action, toJS } from 'mobx'; // ES7 compiler import regeneratorRuntime from 'regenerator-runtime'; class PeopleStore { @observable people = []; @observable loading = false; @observable isSearching = false; @observable searchingList = []; // API call loadPeople = async() => { this.loading = true; const response = await fetch('https://randomuser.me/api/?results=71'); const json = await response.json(); runInAction(() => { this.people = json.results; }); this.loading = false; console.log(toJS(this.people)); } // this function is called by onChange event @action.bound filterList = textTyped => { // changing boolean to identify if input is empty or not if (textTyped.target.value.length < 1) { this.isSearching = false; } else { this.isSearching = true; } console.log(this.isSearching); let peoplesNames = []; for (let i = 0; i < this.people.length; i++) { peoplesNames.push(toJS(this.people[i])); } peoplesNames = peoplesNames.filter(function(item) { return item.name.first.toLowerCase().search(textTyped.target.value.toLowerCase()) !== -1 }); this.searchingList = peoplesNames; // tracking both arrays, they both work console.log(toJS(this.searchingList)); console.log(toJS(this.people)); } } export default new PeopleStore();

組件文件：

 @inject('showHandler', 'PeopleStore') @observer class PickList extends React.Component { componentWillMount() { this.props.PeopleStore.loadPeople(); } person = ({name, picture}, index) => <li className="items__block--user" key={index} onClick={this.props.PeopleStore.selectPerson}> <img className="user--image" src={picture.medium} alt="face" /> <span className="user--name">{`${name.first} ${name.last}`}</span> </li>; render() { if (this.props.PeopleStore.loading) { return ( <div className="loader"></div> ); } return ( <React.Fragment> <input className="users__block--input" onChange={this.props.PeopleStore.filterList}></input> <ul className='items__block'> { this.props.PeopleStore.people.isSearching = false //checks mobx prop ? (this.props.PeopleStore.people.map(this.person)) : (this.props.PeopleStore.searchingList.map(this.person)) } </ul>

為什么它不起作用？ 在頁面上渲染isSearching 屬性設置為false ，這應該會影響 if 語句。

Answer 1

問題在這里，您沒有正確檢查條件：

this.props.PeopleStore.people.isSearching = false

它應該是：

this.props.PeopleStore.people.isSearching == false      // notice "=="

看看=會發生什么，它將三元運算符表達式返回的值分配給isSearching變量。 它將被這樣處理：

isSearching = (false? 1: 2);   // isSearching will get a new value, and second expression will get executed always

檢查這個片段：

 let b = false; b = false? 1: 2; //b will become 2 console.log('b = ', b);