Question

此函数返回错误：

“对象作为React子对象无效（找到：[object Promise]）。如果要渲染子对象的集合，请改用数组。”

，我不知道为什么。它不应该返回对象，应该在数组上映射，对吗？在代码的顶部，我使用了setState的钩子，如下所示：

const [expSymbolData, setExpSymbolData] = useState([])

我有一个类似的代码可以正常工作。另外，当发生这样的错误时，是否有办法查看返回的对象，而不是React只是说“不，请使用数组！”？这将帮助我进行故障排除。

const GetSymbol = async () => {
                                    const rezsymbol = await fetch("https://api.scryfall.com/sets/83491685-880d-41dd-a4af-47d2b3b17c10")
                                    const jsonsymbol = await rezsymbol.json()
                                    setExpSymbolData(jsonsymbol)
                                        {
                                            expSymbolData.map((expStuff) => {
                                                return(
                                                    <span>{expStuff.icon_svg_url}</span>
                                            )}
                                            )
                                        }
                                }

Answer 1

useState setter不是同步操作。值将在下一次渲染时更新，因此您可以使用useEffect根据更新后的值进行渲染，也可以仅使用api返回的数据

const GetSymbol = async () => {
   const rezsymbol = await fetch("https://api.scryfall.com/sets/83491685-880d-41dd-a4af-47d2b3b17c10")
   const jsonsymbol = await rezsymbol.json()
   setExpSymbolData(jsonsymbol)
   return jsonsymbol.map((expStuff) => <span>{expStuff.icon_svg_url}</span>);
}


// Alternate
const GetSymbol = async () => {
   const rezsymbol = await fetch("https://api.scryfall.com/sets/83491685-880d-41dd-a4af-47d2b3b17c10")
   const jsonsymbol = await rezsymbol.json()
   setExpSymbolData(jsonsymbol)
 }

// add a useEffect hook

useEffect(() => {
  expSymbolData.map((expStuff) => <span>{expStuff.icon_svg_url}</span>);
}, [expSymbolData]);

在第二种情况下，根据新逻辑处理借记

对象不是有效的React子代...但是它是一个数组吗？

1 个答案: