對象無效作為React子...但它是一個數組？

Question

此函數返回錯誤：

“對象作為React子對象無效（找到：[對象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]); 

在第二種情況下，根據新邏輯處理rending