为什么 react.js 中的 map() 函数不起作用? [英] Why is my map() function in react.js not working?

问题描述

当我尝试运行此代码时，它返回TypeError: state.drinksData.map is not a function".但是，当我手动输入索引(如 state.drinksData[0])时，它工作正常.为什么会这样，我该如何解决?

When I try to run this code it returns "TypeError: state.drinksData.map is not a function". However, when I type manually the index (as state.drinksData[0]) it works fine. Why is that and how can I fix it?

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 项目的一部分.感谢您的帮助:)

This is part of my first React project. I appreciate your help:)

推荐答案

尽可能不要在 state 中混用不同类型的值，否则会出现这样的错误.您最初将 drinksData 设置为 string，但是 data.drinks 中 API 给出的值是一个 array.

Don't mix the types of values in state when possible, otherwise you can get errors like these. You initially set drinksData to a string, but the value given by the API in data.drinks is an array.

将初始状态初始化为空数组，而不是字符串.(您不能 .map 字符串，因此会出现错误.)

Initialize the initial state to an empty array, not a string. (You can't .map strings, hence the error.)

const initialState = {
    drinksData: []
};

另外，这里的行

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

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

is completely superfluous: it creates a new array that's exactly the same as the old array. Feel free to remove it entirely and just keep using state.drinksData.

strDrink 是数组中一个 objects 的属性 - 它不是数组的属性，所以 drinkData.strDrink 或state.drinkData.strDrink 不起作用.如果您想访问对象的 strDrink 之一，请遍历数组，例如

strDrink is a property of one of the objects in the array - it's not a property of the array, so drinkData.strDrink or state.drinkData.strDrink won't work. If you want to get to one of the object's strDrinks, iterate over the array, eg

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

最后，因为您使用的是钩子，所以没有理由在状态中有一个额外的嵌套对象.状态只是一个简单的数组会更容易:

Lastly, since you're using hooks, there's no reason to have an extra nested object in state. It'd be easier for the state to be just a plain array:

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
}

这篇关于为什么 react.js 中的 map() 函数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！