Reactjs 如何有条件地呈现初始化为空对象的道具？

我的应用程序有一个用户输入一个查询，向pokemonapi发出请求，并呈现响应。在用户发出请求之前，它显示

还没有口袋妖怪，请提交一个口袋妖怪

我将

pokemonCharacter

初始化为传递给

PokemonInfo

组件的空对象。但是，我的条件渲染逻辑不起作用

请让我知道如何解决这个问题

以下是我失败的尝试。
尝试#1

让myDiv；
if（pokemonCharacter&&pokemonCharacter.length>0）{
myDiv=
{pokemonCharacter.name}

}否则{
myDiv=还没有口袋妖怪，请提交一个口袋妖怪

}
返回（{myDiv}）

尝试#2

{（pokemonCharacter&&pokemonCharacter.length>0）？
{pokemonCharacter.name}

：还没有口袋妖怪，请提交一个口袋妖怪！
}

尝试#3

const list=pokemonCharacter=>{
如果（！口袋妖怪字符）{
返回null；
}
if（！pokemonCharacter.length）{
返回还没有口袋妖怪，请提交一个口袋妖怪

}否则{
返回(
{pokemonCharacter.name}

)
}
}
返回(
{list}
);

在检查加载状态的地方，只需检查状态是否为false，然后显示组件

{ loading 
  ? <p>Loading...</p> 
  : <PokemonInfo pokemonCharacter={pokemonCharacter} />
}

{加载
？加载…

: 
}

我通过检查

pokemonCharacter.name

在

PokemonInfo

组件中是否真实来解决这个问题，而不是仅仅检查

pokemonCharacter

对象作为一个整体是否真实

     {pokemonCharacter.name ?
        <div>
          <p>{pokemonCharacter.name}</p>
          <img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
        </div>
      : <p>No Pokemon yet, please submit a Pokemon!</p>}

{pokemonCharacter.name？
{pokemonCharacter.name}

：还没有口袋妖怪，请提交一个口袋妖怪！
}

使用加载器。检查是否为false以显示数据感谢，但它仍然不是有条件渲染。

    const list = pokemonCharacter => {
    if (!pokemonCharacter) {
      return null;
    }
    if (!pokemonCharacter.length) {
      return <p>No Pokemon yet, please submit a Pokemon!</p>
    } else {
      return (
        <div>
          <p>{pokemonCharacter.name}</p>
          <img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
        </div>
      )
    }
  }
  return (
    {list}
  );

{ loading 
  ? <p>Loading...</p> 
  : <PokemonInfo pokemonCharacter={pokemonCharacter} />
}

     {pokemonCharacter.name ?
        <div>
          <p>{pokemonCharacter.name}</p>
          <img src={pokemonCharacter.sprites.front_default} alt="pokemon" />
        </div>
      : <p>No Pokemon yet, please submit a Pokemon!</p>}