Javascript 当我的搜索字段为空，但在搜索时仍异步渲染时，如何渲染到无结果页面？

我正在根据用户键入的内容渲染一组按钮。基本上，用户开始键入，按下每个字母后，一组新的按钮就会呈现到页面上，其中obj.content包含要键入的字符串。这一切都很好，但我有一个小问题。当用户第一次进入程序时，所有按钮都显示在显示所有选项的页面上。我想显示零按钮，如果没有被搜索

到目前为止，正常状态是查找“”的任何匹配项，搜索的每个字符串都包含该匹配项，因此每个按钮都会呈现到屏幕上

如果我的搜索字段为空，是否有办法渲染出零按钮

我试过

const RenderSearchResults = () => {
  <div>
    {renderResults}
  </div>
}


const renderResults = this.props.data.filter(obj => {
  return obj.content.includes(this.state.keyToFind);
 }).map((obj, idx) => {
   return (
      <button name={obj.name} value={this.state.btnToFind} key={idx}>{obj.title}   </button>
 )
});

// FROM THE MAIN COMPONENT RETURN

return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
    {this.state.keyToFind !== '' ? <RenderSearchResults /> : console.log("no input")}
)

const RenderSearchResults=（）=>{
{renderResults}
}
const renderResults=this.props.data.filter（obj=>{
返回obj.content.includes（this.state.keyToFind）；
}).map（（obj，idx）=>{
返回(
{obj.title}
)
});
//从主部件返回
返回(


{renderResults}
)

但是，当用户开始键入时，上述方法不会更新。使搜索/渲染异步工作的唯一方法是，在不使用if语句检查搜索字段是否为空的情况下，将{renderResults}放入主组件返回中。但是，这会导致所有可能的按钮都以正常状态呈现给页面

---

我创建了一个小示例，与您所描述的类似，但要简化得多。这里我检查

keyToFind

是否为空字符串，并直接从进行渲染的方法返回空数组

class RenderButtons extends React.PureComponent {
    state = {
      keyToFind: ''
    }

    renderResults = () => {
      if (this.state.keyToFind === '') return [];

      const renderResults = ['a', 'b', 'c', 'aa']
          .filter(obj => {
              return obj.indexOf(this.state.keyToFind) >= 0;
          })
          .map((obj, idx) => {
              return (<button name={obj} value={obj} key={idx}>{obj}</button>)
          });

      return renderResults;
    }

    handleChange = (event) => {
      this.setState({ keyToFind: event.target.value });
    }
    render () {
      const renderResults = this.renderResults();
      return (
          <div>
          <input type="text" value={this.state.keyToFind} onChange={this.handleChange} />             
          {renderResults}
        </div>          
      );
    }
}

类RenderButtons扩展了React.PureComponent{
状态={
keyToFind:'
}
renderResults=（）=>{
如果（this.state.keyToFind==''）返回[]；
常量renderResults=['a'，'b'，'c'，'aa']
.filter（obj=>{
返回obj.indexOf（this.state.keyToFind）>=0；
})
.map（（obj，idx）=>{
返回（{obj}）
});
返回renderResults；
}
handleChange=（事件）=>{
this.setState（{keyToFind:event.target.value}）；
}
渲染（）{
const renderResults=this.renderResults（）；
返回(
{renderResults}
);
}
}

---

下面是一个关于的工作示例。

我认为

react

不允许返回多个

react

元素而不使用任何包装器或不作为数组。它通常会失败，错误是相邻的JSX元素必须包装在一个封闭的标记中或类似的标记中。在您的情况下它是如何工作的？我最终通过在返回语句中添加一个检查来解决它，但我确实喜欢您的版本。谢谢你的帮助我很乐意帮忙：）

class RenderButtons extends React.PureComponent {
    state = {
      keyToFind: ''
    }

    renderResults = () => {
      if (this.state.keyToFind === '') return [];

      const renderResults = ['a', 'b', 'c', 'aa']
          .filter(obj => {
              return obj.indexOf(this.state.keyToFind) >= 0;
          })
          .map((obj, idx) => {
              return (<button name={obj} value={obj} key={idx}>{obj}</button>)
          });

      return renderResults;
    }

    handleChange = (event) => {
      this.setState({ keyToFind: event.target.value });
    }
    render () {
      const renderResults = this.renderResults();
      return (
          <div>
          <input type="text" value={this.state.keyToFind} onChange={this.handleChange} />             
          {renderResults}
        </div>          
      );
    }
}