当我的搜索字段为空时，如何在不搜索结果的情况下呈现页面，但在搜索时仍然异步呈现？

Posted 2021-04-08

我正在渲染以根据用户输入的内容来分页一堆按钮。基本上用户开始键入并按下每个字母，一组新的按钮被呈现到一个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")}
)

---

// THIS WORKS BUT STARTS WITH ALL BUTTONS RENDERED OUT
return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
  {renderResults}
)

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

无论如何开始没有任何东西被渲染到页面？

答案

我创建了一个类似于你所描述的小例子，但更简化了。在这里，我正在检查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>          
      );
    }
}

这是一个关于codesandbox的工作示例。