我有一个函数，该函数从表单获取输入并在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 ', found)
if (found) {
setIsInAPI(true)
console.log('isInAPI ', isInAPI)
}
}
答案 0 :(得分：0)
很有可能您的状态正在更新，但是useState挂钩函数是异步的，因此，如果您在下一行中直接记录该状态，则可能不会立即反映出更改。如果要在更改后查看特定状态的值，可以使用带有第二个值的useEffect钩子作为要监视的状态变量。
useEffect(() => {
console.log('isInAPI ', isInAPI);
console.log('wasAPICallMade ', wasAPICallMade)
}, [isInAPI, wasAPICallMade])// This is be executed when "isinApi" or "wasAPICallMade" state changes