如何在反应中有条件地渲染元素

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

如何在反应中有条件地渲染元素

How to render element conditionally in react

javascript

if-statement

reactjs

mobx

mobx-react