如何从函式内部的渲染中调用函式以作为回应？

Question

我目前正在使用搜索栏，该栏应首先显示整个列表，然后在单击按钮时呈现搜索到的项目。该项目具有一个名为“更多”的按钮，该按钮将随后提供有关单击的项目的更多信息。

displayRepo函数一直起作用，直到我在条件渲染函数中用该函数包装了该变量。

我该怎么做才能使这项工作？

非常感谢。

import React, { Component } from "react";

import styled from "styled-components";
import InfoCard from "./InfoCard";

const StyledInput = styled.input`
  color: palevioletred;
  border-radius: 1em;
`;

const ListStyle = styled.ul`
  color: palevioletred;
  list-style: none;
  text-align: center;
`;

class Searchbar extends Component {
  state = {
    repos: this.props.repo,
    search: "",
    selectedItem: this.props.repo,
    showInfoComponent: false,
    showSearch: false,
    showList: true
  };
  handleChange = event => {
    event.preventDefault();
    this.setState({ search: event.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
      selectedItem: this.state.search
    });
  };

  renderMore = () => {
    this.setState({ showComponent: true });
  };

  renderSearch = () => {
    this.setState({ showSearch: true });
    this.setState({ showList: false });
  };

  render() {
    console.log(this.state.selectedItem);
    let filteredRepo =
      this.state.repos &&
      this.state.repos
        .map(repo => repo.name)
        .filter(repo => {
          return repo.toLowerCase().includes(this.state.search.toLowerCase());
        });

    let information = this.state.repos.map((item, index) => {
      return (
        <ul key={index}>
          <li>Name : {item.name}</li>
          <li>Forkcount: {item.forkCount}</li>

          <li>Owner: {item.owner.login}</li>
          <li>Stargazer:{item.stargazers.totalCount}</li>
          <li>Watchers:{item.watchers.totalCount}</li>
          <img src={item.owner.avatarUrl} alt="avatar" height="90" width="90" />
        </ul>
      );
    });

    let displayRepo = filteredRepo.map(repo => {
      return (
        <li key={repo}>
          {repo}
          <button onClick={this.renderMore}>More</button>
          {this.state.showInfoComponent ? (
            <InfoCard
              information={information}
              search={this.state.selectedItem}
            />
          ) : null}
        </li>
      );
    });

    return (
      <div>
        <div className="input-center">
          <StyledInput
            type="text"
            value={this.state.search}
            onChange={this.handleChange}
          />
          <button onClick={this.handleSubmit} onClick={this.renderSearch}>
            Search
          </button>
        </div>

        <div>
          {this.state.showList ? (
            <div>
              {this.state.repos.map(repo => {
                return <p key={repo.id}>{repo.name}</p>;
              })}
            </div>
          ) : null}
        </div>
        {this.state.showSearch ? (
          <div>
            <ListStyle>{displayRepo}</ListStyle>
          </div>
        ) : null}
      </div>
    );
  }
}
export default Searchbar;