我具有此功能,该功能可获取一组字符和图像。
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子对象无效(找到:[对象诺言])。如果您打算渲染儿童集合,请使用数组。
发生的事情是,React无法解决渲染中的承诺。最初,您的数据获取函数将返回一个Promise对象,而不是React无法渲染的数据。
您需要设置状态以首先保存占位符数据,直到解决承诺为止,然后再处理承诺承诺之后的数据。检查此问题以找到一个好的解决方案。
Objects are not valid as a React child (found: [object Promise])