为什么 map 停止呈现 ReactJS 中的标题？

Question

我仍然对 map 有点困惑。当我注释掉我的 h2 渲染的 map 时，我做错了什么？ 是的，我仍然想使用 fetch。 在我添加更多深度之前，我需要了解我做错了什么。

import { useState, useEffect } from "react";

export default function SearchAPI() {

    const [cocktail, setCocktail] = useState()
    

    useEffect(() => {
        fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita')
        .then(res => res.json())
            .then(data => {
            setCocktail(data.drinks[0])
            console.log(cocktail)
            
           
        })
        .catch(err => {
            console.log(`error ${err}`)
        })
    }, [])

    return (
        <>
            <h2>here is your drink</h2>
            {cocktail.map((element) => {
                return <h2>{element.strDrink}</h2>
                
                
            })}
        </>
    )
}

当我注释掉它呈现的 function 时。

Answer 1

听起来您正尝试在 object 上使用map()方法，但它不起作用。 map()方法是一个数组方法，只能在arrays上使用。

如果您尝试访问 object 中的数据，则需要使用点符号来访问各个 object 属性。 例如，如果您有一杯 object cocktail并且您正在尝试访问strdrink属性，您可以这样做： cocktail.strdrink 。

如果您已将cocktail设置为data.drinks[0] ，这将访问 drinks 数组中的第一个 object。

改变这个：

    {cocktail.map((element) => {
      return <h2>{element.strDrink}</h2>
    })}

对此：

    {cocktail && <h2>{cocktail.strDrink}</h2>}

 // Get a hook function const {useState, useEffect} = React; const Example = () => { const [cocktail, setCocktail] = useState() useEffect(() => { fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita').then(res => res.json()).then(data => { setCocktail(data.drinks[0]) }).catch(err => { console.log(`error ${err}`) }) }, []) return ( <div> <h2>here is your drink</h2> {cocktail && <h2>{cocktail.strDrink}</h2>} </div> ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <Example /> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

Answer 2

好吧，你没有提到一个特定的错误，但据我看到你的代码，你在获取 function 时遇到了问题。从 api 获取数据是异步的，这意味着当你的反应页面呈现时，你没有实际数据而且它抛出一个错误（因为没有 element.strDrink），你需要做的是：你需要检查数据是否被获取，并根据它渲染东西。 所以

export default function SearchAPI() {

    const [cocktail, setCocktail] = useState([])
    

    useEffect(() => {
        fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita')
        .then(res => res.json())
            .then(data => {
            setCocktail(data.drinks[0])
            console.log(cocktail)
            
           
        })
        .catch(err => {
            console.log(`error ${err}`)
        })
    }, [])

    return (
        <>
            <h2>here is your drink</h2>
            {cocktail.length ? cocktail.map((element) => {
                return <h2>{element.strDrink}</h2>
                
                
            })  : "Loading data"}
        </>
    )
}

Answer 3

当我注释掉我的 h2 渲染的 map 时，我做错了什么？

h2在map()之外，所以如果cocktail是空的，你仍然会渲染h2 。

---

如果cocktail有一些数据，您可能只想渲染h2 。

您可以将默认值添加到 state ( useState({}) )，然后使用Object.keys(coctail).length === 0检查 object 中是否有任何值。

然后使用(condition)? <>content with data</>: <>loading</> (condition)? <>content with data</>: <>loading</>以呈现h2和map()或加载消息。

在object 上循环以呈现所有信息

---

例子：

 const { useState, useEffect } = React; const SearchAPI = () => { const [cocktail, setCocktail] = useState([]) useEffect(() => { fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita').then(res => res.json()).then(data => setCocktail(data.drinks[0]) ).catch(err => console.log(`error ${err}`)) }, []) return ( <React.Fragment> { (Object.keys(cocktail).length > 0)? ( <React.Fragment> <h1>here is your drink</h1> {Object.keys(cocktail).map((key, index) => ( <React.Fragment> <div class='row'> <h3>{key}</h3> <em>{cocktail[key]}</em> </div> </React.Fragment> ))} </React.Fragment> ): <em>{'Loading data'}</em> } </React.Fragment> ) } ReactDOM.render(<SearchAPI />, document.getElementById("react"));

 .row { width: 50vw; display: flex; flex-direction: column; padding-bottom: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>