Javascript 如何使动态文本在删除组件（自定义html元素）时在react中显示正确的句子

在React中，删除组件后，我想制作一个动态句子，在app.js中显示如下正确句子：

 let awesomePhrase = '';
    if (!this.state.showPersons) {
      awesomePhrase = 'Nobody is here, it seems :/';
    }
    if (this.state.showPersons && this.state.persons.length === 2) {
      awesomePhrase = "All aboard :D";
    }
    if (!this.state.persons.filter(p => p.id === 1)) {
      awesomePhrase = "Where's Matin?!";
    }
    if (!this.state.persons.filter(p => p.id === 2)) {
      awesomePhrase = "Where's Mobin?!";
    }

当我删除id 1或id 2时，它不会显示任何句子。也就是说，既不是“Matin在哪里？！”也不是“Mobin在哪里？！”。 但前两句很好用

---

（编辑：下面的每一段代码都在主文件app.js中）

删除：

deleteHandler = index => {
    const persons = [...this.state.persons].filter(
      person => person.id !== index
    );
    this.setState({ persons });
  };

国家：

state = {
    persons: [
      { id: 1, name: 'Matin', age: 27 },
      { id: 2, name: 'Mobin', age: 26 }
    ],
    showPersons: false,
    ...
};

类的呈现中的组件：

 {this.state.persons.map(person => {
            return (
              <Person
                key={person.id}
                name={person.name}
                age={person.age}
                click={() => this.deleteHandler(person.id)}
              />
            );
  })}

{this.state.persons.map（person=>{
返回(
this.deleteHandler（person.id）}
/>
);
})}

渲染中使用动态文本的部分：

return (
  <div>
  ...
   <h2>{awesomePhrase}</h2>
  ...
  </div>
)

返回(
...
{awesomePhrase}
...
)

我想我找到了解决办法

我使用了

find

，而不是

filter

，并尝试在deleteHandler方法中检查它们。还向State添加了一个独立的

awesomePhrase

。 因此：

返回(
...
{this.state.awesomePhrase | | awesomePhrase}
...
);

---

我欢迎任何有助于进一步改进代码或正确更正代码的建议。我现在才让它工作。

您的代码的问题是

过滤功能。如果没有元素通过测试，过滤器将返回一个空数组，在Javascript中，空数组不是falsy值

条件
！this.state.persons.filter（p=>p.id==2）
将始终为false

在这种情况下使用的合适函数是数组。一些返回布尔值的函数取决于测试函数的结果

注意Javascript中的返回类型和错误/真实性。
您在哪里设置
showPersons
？@JuniusL。它设置为“状态”，并在渲染中用于切换显示组件。它很好用。我似乎通过使用“查找”而不是“筛选”来让它做出响应。事实上，我想我现在明白了。我会更新这个问题。说明哪些代码来自哪个组件会很有帮助。所有显示的内容都在主文件app.js中。你解决了这个问题吗？

  deleteHandler = index => {
    const persons = [...this.state.persons].filter(
      person => person.id !== index
    );

    if (persons.length === 0) {
      this.setState({ awesomePhrase: 'where did they all gone?' });
    }

    if (persons.find(p => p.name === 'Matin')) {
      this.setState({ awesomePhrase: 'Where is Mobin?' });
    }
    if (persons.find(p => p.name === 'Mobin')) {
      this.setState({ awesomePhrase: 'Where is Matin?' });
    }

    this.setState({ persons });
  };


  state = {
    persons: [
      { id: 1, name: 'Matin', age: 27 },
      { id: 2, name: 'Mobin', age: 26 }
    ],
    ...,
    showPersons: false,
    mobin: true,
    awesomePhrase: ''
  };

 return (
      <div className="App">
        ...
        <h2>{this.state.awesomePhrase || awesomePhrase}</h2>
        ...
      </div>
    );