为什么我的 map() 函数在 react.js 中不起作用？

Question

当我尝试运行这段代码时 returns “TypeError: state.drinksData.map 不是一个函数”。但是，当我手动输入索引时（如 state.drinksData[0]），它工作正常。为什么会这样，我该如何解决？

import React, {useState} from 'react';

var initialState = {
    drinksData: ""
}


function LoadDrinks(props) {
    const [state, setState] = useState(initialState);


    //Fetching the cocktails' data from the ingredient clicked
    function pageReload(e){
        fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`)
        .then(res=>res.json())
        .then(data=>{
            setState({drinksData:data.drinks})
        })   
    }
    
   
    console.log(state.drinksData)
    
    var drinkData = state.drinksData.map(data=>{return(data)});
    //However, this code runs fine when I type the index manually --> drinkData = state.drinksData[0]; 
    var ingredients = ["Gin", "Vodka", "Rum", "Whiskey", "Tequila", "Brandy"];

    return (
        <>
            <select onChange={pageReload}>
                {ingredients.map((ingredient, i)=>{return (<option key={i}>{ingredient}</option>)})}
            </select>
            <div>{drinkData.strDrink}</div>
        </>
    )
} 

export default LoadDrinks;

这是我第一个 React 项目的一部分。感谢您的帮助:)

Answer 1

尽可能不要混合状态中的值类型，否则会出现此类错误。您最初将 drinksData 设置为 字符串 ，但 data.drinks 中的 API 给出的值是一个数组 .

将初始状态初始化为空数组，而不是字符串。（你不能 .map 字符串，因此错误。）

const initialState = {
    drinksData: []
};

此外，这里的行

var drinkData = state.drinksData.map(data=>{return(data)});

完全是多余的：它创建了一个与旧数组完全相同的新数组。随意完全删除它并继续使用 state.drinksData.

strDrink 是数组中对象之一的属性 - 它不是数组的属性，所以 drinkData.strDrink 或 state.drinkData.strDrink 将不起作用。如果你想到达对象的 strDrink 之一，遍历数组，例如

state.drinksData.map(obj => obj.strDrink)

最后，由于您使用的是挂钩，因此没有理由在状态中包含额外的嵌套对象。状态只是一个普通数组会更容易：

const [drinks, setDrinks] = useState([]);

和

function pageReload(e){
    fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${e.target.value}`)
    .then(res=>res.json())
    .then(data=>{
        setDrinks(data.drinks);
    })
    // .catch(handleErrors); // don't forget to catch possible errors
}

为什么我的 map() 函数在 react.js 中不起作用？

Why is my map() function in react.js not working?

reactjs

map-function