如何在react中呈现元素

我有这个函数来获取一组字符和图像。

   const displayCharacters =  async () => { 
        if(filteredCharacters !== 'default'){
          const a = filteredCharacters.map(e => e.name);

          const options = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ 'data' : a })
          };

          const b = await fetch("/image",options)
          return b.json(); 

        }else{
          return [];
        }
      }

html如下所示:

  return (
    <div className="App">
      <form>
        <select name="movie" onChange ={handleMovieChange} value={selectedMovie}>
          <option value ="default">Please select a movie</option>
          {movieOptions()}
        </select>

        <select name="species" onChange={handleSpeciesChange} value={selectedSpecies}>
          <option value="default">Please select a species</option>
          {selectedMovie !== 'default' ? speciesOptions() : ''}
        </select>

        <select name="planets" onChange={handlePlanetChange} value={selectedPlanets}> 
          <option value="default">Please select a planet</option>
          {selectedSpecies !== 'default' ? planetOptions() : ''}
        </select> 
      </form>

      {displayCharacters().then(data=> data.map(char => (<div>{char.name}</div>)))}
    </div>

  );
}

但我有个错误:

错误:对象作为反应子对象无效(找到:[object 而是数组。