如何将这些多个功能链接在一起？答案

【问题标题】：How do I link these multiple functions together?如何将这些多个功能链接在一起？
【发布时间】：2020-10-22 02:01:16
【问题描述】：

我正在尝试在一个函数中执行多项操作。当我提交表单时，我需要它们一个接一个地发生

1. Get back data (here is where the meals array is set)
2. Check the length of the meals array
3. Append a slide if the length of the array is longer than 1
4. Slide to that new slide if meals length is indeed greater than 1

我正在尝试回调和异步函数，但它仍然无法正常工作。提交表单时，会设置餐点数组。然后，如果我再次提交，则检查餐长度数组，如果 if/else 语句为真，则附加幻灯片。

请帮帮我！我会采取任何可行的解决方案 - 承诺、回调等。

这是第一个函数的代码：

const handleSearch = (e) => {

    e.preventDefault();

    if (searchVal.trim() !== '') {
        let foodSearch = searchVal.trim().replace(/ /g, '+')
        databaseFetch(`${BASE_URL}search.php?s=${foodSearch}`)
        secondFunction()
    } else {
        setSearchVal('')
    }       
}

这是第二个功能：

function secondFunction() {
    if (meals.length > 1) {
        slide1Horizontal.appendSlide(`<div class="swiper-slide">${ReactDOMServer.renderToString(<SearchResults />)}</div>`)
        slide1Horizontal.slideTo(2, 1000)
    }

这里是原始的 fetch 函数：

const databaseFetch = async foodToSearch => {
    setLoading(true)

    let returned = await (await fetch(foodToSearch));

    if (returned.ok) {
        let result = await returned.json()
        //console.log(result)
        setMeals(
            result.meals !== null   
                ? [...result.meals]
                : []
        )
        //console.log(meals)
    } else {
        setError({
            error: true,
            statusCode: returned.status,
            statusText: returned.statusText
        })
    }
    setLoading(false)
}

}

【问题讨论】：

什么是setMeals，meals 变量的作用域是什么？
我正在使用 React Hooks

标签： javascript reactjs asynchronous promise react-hooks

【解决方案1】：

您似乎需要将您的 handleSearch 函数设置为异步函数，并使用 async/await 语法等待您的数据库获取。

https://javascript.info/async-await

问题似乎还在于，您在设置的同一函数中引用有状态变量“meals”，并且您期望获得更新的值。您需要做的是在 databaseFetch 组件中返回餐点，然后将 databaseFetch 的返回值作为参数传递给 secondFunction。这应该会给你更新的价值

const handleSearch = (e) => {

e.preventDefault();

if (searchVal.trim() !== '') {
    let foodSearch = searchVal.trim().replace(/ /g, '+')
    databaseFetch(`${BASE_URL}search.php?s=${foodSearch}`)
    secondFunction()
} else {
    setSearchVal('')
}       


const databaseFetch = async foodToSearch => {
setLoading(true)

let returned = await (await fetch(foodToSearch));

if (returned.ok) {
    let result = await returned.json()
    //console.log(result)
    return (
        result.meals !== null   
            ? [...result.meals]
            : []
    )
    //console.log(meals)
} else {
    setError({
        error: true,
        statusCode: returned.status,
        statusText: returned.statusText
    })
}
setLoading(false)}

function secondFunction(mealsFromDb) {
if (mealsFromDb.length > 1) {
    slide1Horizontal.appendSlide(`<div class="swiper-slide">${ReactDOMServer.renderToString(<SearchResults />)}</div>`)
    slide1Horizontal.slideTo(2, 1000)
}

【讨论】：

这个解决方案产生了同样的问题。
同样的结果。每当我提交表单时，餐点数组都会落后 1 次迭代。

【解决方案2】：

为什么不在数据库 fetch 上添加第二个函数？

const databaseFetch = async foodToSearch => {
setLoading(true)

let returned = await (await fetch(foodToSearch));

if (returned.ok) {
   let result = await returned.json()
   // ADD SECOND FUNCTION HERE TO ENSURE THAT IT RUNS AFTER DATA FETCH
   secondFunction(result);
   return (
     result.meals !== null   
        ? [...result.meals]
        : []
  )
  //console.log(meals)
 } else {
   setError({
      error: true,
      statusCode: returned.status,
      statusText: returned.statusText
})
}
setLoading(false)}

【讨论】：