如何在react中渲染元素

问题描述 投票:0回答:1

我具有此功能,该功能可获取一组字符和图像。

   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>

  );
}

但是我得到一个错误:

错误:对象作为React子对象无效(找到:[对象诺言])。如果您打算渲染儿童集合,请使用数组。

reactjs promise
1个回答
1
投票

发生的事情是,React无法解决渲染中的承诺。最初,您的数据获取函数将返回一个Promise对象,而不是React无法渲染的数据。

您需要设置状态以首先保存占位符数据,直到解决承诺为止,然后再处理承诺承诺之后的数据。检查此问题以找到一个好的解决方案。

Objects are not valid as a React child (found: [object Promise])

© www.soinside.com 2019 - 2024. All rights reserved.