React Hooks，useState：handleSubmit中的条件被忽略

如何解决React Hooks，useState：handleSubmit中的条件被忽略

我有一个函数，该函数从表单获取输入并在Array原型上运行some方法，然后在isInAPI && wasAPICallMade（i'将数据插入到代码段中）本质上是因为我应该在wasAPICallMade状态正在更新时以任何一种方式获取某种东西，但事实并非如此。

我在做什么错了？

indgredients[{
      id: 1,name: 'Hemp Protein'
    },{
      id: 2,name: 'Avocado'
    },{
      id: 3,name: 'Organic Maca'
    },{
      id: 4,name: 'Organic Kale'
    },{
      id: 5,name: 'Organic Coconut Water'
    },{
      id: 6,name: 'Astragalus'
    },{
      id: 7,name: 'Rhodiola'
    },{
      id: 8,name: 'Other Spices'
    },{
      id: 9,name: 'Green Coffee Beans'
    },{
      id: 10,name: 'Organic Peach'
    },{
      id: 11,name: 'Organic Seabuckthorn'
    },{
      id: 12,name: 'Hijiki Seaweed'
    },{
      id: 13,name: 'Organic Turmeric'
    },{
      id: 14,name: 'Organic Ginger'
    },{
      id: 15,name: 'Lime Juice'
    },{
      id: 16,name: 'Bell Pepper'
    },{
      id: 17,name: 'Organic Spinach'
    },{
      id: 18,name: 'Organic Flax Seeds'
    },{
      id: 19,name: 'Organic Goji Berry'
    },{
      id: 20,name: 'Organic Chlorella'
    },{
      id: 21,name: 'Organic Nutmeg'
    },{
      id: 22,name: 'Kale'
    },{
      id: 23,name: 'Tomato2'
    },{
      id: 24,name: 'Organic Cucumber'
    },{
      id: 25,name: 'Tamari'
    },{
      id: 26,name: 'Organic Cacao'
    },{
      id: 27,name: 'Chaga Mushroom'
    },{
      id: 28,name: 'Raw Cashew'
    },{
      id: 29,name: 'Lemon'
    },{
      id: 30,name: 'Organic Cold Brew Coffee'
    },{
      id: 31,name: 'Organic Sweet Cherry'
    },{
      id: 32,name: 'Japanese Matcha Green Tea'
    },{
      id: 33,name: 'Pink Himalayan Sea Salt'
    },{
      id: 34,name: 'Organic Coconut'
    },{
      id: 35,name: 'Watermelon'
    },{
      id: 36,name: 'Organic Wheatgrass'
    },{
      id: 37,name: 'Coconut Milk'
    },{
      id: 38,name: 'Oats'
    },{
      id: 39,name: 'Shiitake + Crimini Mushrooms'
    },{
      id: 40,name: 'Organic Apple'
    },{
      id: 41,name: 'Organic Camu Camu'
    },{
      id: 42,name: 'Organic Zucchini'
    },{
      id: 43,name: 'Organic Pea Protein'
    },{
      id: 44,name: 'Chia Seed'
    },{
      id: 45,name: 'Spinach'
    },{
      id: 46,name: 'Organic Acerola Cherry'
    },{
      id: 47,name: 'Butternut Squash Noodles'
    },{
      id: 48,name: 'Sweet Potato'
    },{
      id: 49,name: 'Galangal'
    },{
      id: 50,name: 'Basil'
    },{
      id: 51,name: 'Organic Raspberry'
    },{
      id: 52,name: 'Black Garlic'
    },{
      id: 53,name: 'Zucchini'
    },{
      id: 54,name: 'Organic Peppermint'
    },{
      id: 55,name: 'Raw Pumpkin Seed'
    },{
      id: 56,name: 'Golden Figs'
    },{
      id: 57,name: 'Papaya'
    },{
      id: 58,name: 'Dulse Seaweed'
    },{
      id: 59,name: 'Garlic'
    },{
      id: 60,name: 'Madras Curry'
    },{
      id: 61,name: 'Cordyceps Mushroom'
    },{
      id: 62,name: 'Tomato'
    },{
      id: 63,name: 'Reishi Mushroom'
    },{
      id: 64,name: 'Cinnamon'
    },{
      id: 65,name: 'Red Miso'
    },{
      id: 66,name: 'Macadamia Nut'
    },{
      id: 67,name: 'Organic Acai Berry'
    },{
      id: 68,name: 'Raw Almond'
    },{
      id: 69,name: 'Chickpea'
    },{
      id: 70,name: 'Organic Mango'
    },{
      id: 71,name: 'Organic Coconut Oil'
    },{
      id: 72,name: 'Organic Pineapple'
    },{
      id: 73,name: 'Organic Celery'
    },{
      id: 74,name: 'Scallion'
    },{
      id: 75,name: 'Organic Vanilla Bean'
    },{
      id: 76,name: 'Ginger'
    },{
      id: 77,name: 'Cauliflower'
    },{
      id: 78,name: 'Raw Walnut'
    },{
      id: 79,name: 'Organic Blueberry'
    },{
      id: 80,name: 'Organic Date'
    },{
      id: 81,name: 'Organic Banana'
    },{
      id: 82,name: 'Rosemary'
    },{
      id: 83,name: 'Vanilla Bean'
    },{
      id: 84,name: 'Ginseng'
    },{
      id: 85,name: 'Organic Strawberry'
    },{
      id: 86,name: 'Carrot'
    },{
      id: 87,name: 'Oregano'
    },{
      id: 88,name: 'Lemon2'
    },{
      id: 89,name: 'Organic Garbanzo Beans'
    },{
      id: 90,name: 'Organic Blackberry'
    },{
      id: 91,name: 'Organic Raw Almond Butter'
    },{
      id: 92,name: 'Pecans'
    },{
      id: 93,name: 'Organic Mulberry'
    },{
      id: 94,name: 'Organic Pepper'
    },{
      id: 95,name: 'Organic Hemp Seed'
    },{
      id: 96,name: 'Organic Pumpkin'
    },{
      id: 97,name: 'Organic Blue Majik'
    },{
      id: 98,name: 'Organic Gluten-Free Oats'
    },{
      id: 99,name: 'Organic Cardamom'
    },{
      id: 100,name: 'Lemon Juice'
    },

import React,{ useState } from 'react'
import Alert from '@material-ui/lab/Alert'

import TextField from '@material-ui/core/TextField'
import Grid from '@material-ui/core/Grid'

import { makeStyles } from '@material-ui/core/styles'

var useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),width: '25ch',},submit: {
            color: 'red',}))

var IngredientInput = ({ indgredients,products }) => {
    var [indgredients,setIngredients] = useState(indgredients)
    var [text,setText] = useState('')
    var [isInAPI,setIsInAPI] = useState(false)
    var [wasAPICallMade,setWastAPICallMade] = useState(false)

    function CheckIngredients(input) {
        if (indgredients.some((item) => item.name === input)) {
            setIsInAPI((prevState) => !prevState)
            console.log('isInAPI ',isInAPI)

            setWastAPICallMade((prevState) => !prevState)
            console.log('wasAPICallMade ',wasAPICallMade)
        }
    }

    function handleTextChange(e) {
        console.log('e',e.target.value)
        setText(e.target.value)
    }

    function handleSubmit(e) {
        e.preventDefault()
        CheckIngredients(text)
        setText('')
    }
    
    var classes = useStyles()

    return (
        <>
            <Grid container justify="center">
                <form onSubmit={handleSubmit} className={classes.root}>
                    <TextField
                        value={text}
                        onChange={handleTextChange}
                        id="outlined-basic"
                        label="Outlined"
                        variant="outlined"
                    />
                    <button type="submit" className={classes.submit}>
                        {' '}
                        Check Ingredient{' '}
                    </button>
                </form>
                {wasAPICallMade ? (
                    isInAPI ? (
                        <Alert severity="success">
                            This is a success alert — check it out!
                        </Alert>
                    ) : (
                        <Alert severity="error">
                            This is an error alert — check it out!
                        </Alert>
                    )
                ) : null}
            </Grid>
        </>
    )
}
export default IngredientInput

更新

根据Emile和Lanxion的建议，我尝试了以下操作：

useEffect(() => {
    console.log('isInAPI in useEffect',isInAPI)
    console.log('wasAPICallMade in useEffect',wasAPICallMade)
},[isInAPI,wasAPICallMade]) 

function CheckIngredients(input) {
    setWastAPICallMade(true)
    var found = indgredients.some((item) => item.name === input)

    console.log('found ',found)
    if (found) {
        setIsInAPI(true)
        console.log('isInAPI ',isInAPI)
    }
}

现在有两个关于此更改的问题：

我的理解是正确的，useEffect会在初始渲染时触发并且每次对这些变量进行 更改？如果没有，useEffect将不会触发。

那么在CheckIngredients函数中，setWastAPICallMade(true)被忽略了吗？

还有var found = indgredients.some((item) => item.name === input)为什么没有正确的答案？

function CheckIngredients(input) {
    setWastAPICallMade(true)
    var found = indgredients.some((item) => item.name === input)

    console.log('found ',isInAPI)
    }
}

解决方法

很有可能您的状态正在更新，但是useState挂钩函数是异步的，因此，如果您在下一行中直接记录该状态，则可能不会立即反映出更改。如果要在更改后查看特定状态的值，可以使用带有第二个值的useEffect钩子作为要监视的状态变量。

useEffect(() => {
    console.log('isInAPI ',isInAPI); 
    console.log('wasAPICallMade ',wasAPICallMade)
},[isInAPI,wasAPICallMade])// This is be executed when "isinApi" or "wasAPICallMade" state changes