React列表首次选中不渲染、状态更新后才正常显示问题排查

如有需要，可前往Github查看项目的完整代码。

• 选中首条饮品时，模态弹窗内的配料列表首次加载不显示
• 切换选中第二款饮品后，配料列表可正常展示
• 异常参考截图：
  • 首次搜索时配料未正常显示截图
  • 选中第二款饮品后配料正常显示截图

项目对接TheCocktailDB免费API拉取全量鸡尾酒数据，存入名为data的状态。用户点击选中某款饮品时，对应饮品数据存入drink状态，触发模态弹窗渲染，展示饮品的图片、配料、配方、制作步骤。

选中饮品触发的副作用逻辑写在useEffect中，依赖项为drink状态，触发时依次执行配料解析、用量解析两个函数：

useEffect(() => {
  getIngredients(drink);
  getMeasurements(drink); 
}, [drink]);

配料解析函数getIngredients #

饮品对象包含strIngredient1到strIngredient15共15个配料字段，函数遍历所有字段，校验字段值为非空字符串后存入临时数组，最终同步到ingredients状态：

const getIngredients = (drink: IDrinkProps) => {
  /*
  逐个校验15个配料属性是否为非空字符串，符合条件的值推入filteredIngredients数组，最终在选中饮品的模态弹窗中展示
  */
  for (let i = 0; i <= 14; i++) {
    // 校验当前配料是否为字符串类型，不符合则输出控制台日志
    if (typeof drink[`strIngredient${i}`] !== "string") {
      console.log(typeof drink[`strIngredient${i}`], "Detected");
    // 校验当前配料是否为空字符串，符合则输出控制台日志
    } else if (drink[`strIngredient${i}`] === "") {
      console.log("Empty string detected");
    } else {
      // 校验通过的配料推入临时数组
      filteredIngredients.push(drink[`strIngredient${i}`]);
    }
    // 循环执行过程中同步配料状态到视图
    setIngredients(filteredIngredients);
  }
};

用量解析函数getMeasurements #

逻辑与配料解析一致，遍历strMeasure1到strMeasure15共15个用量字段，校验通过后存入临时数组同步到measurements状态，执行完成后调用配方组合函数：

const getMeasurements = (drink: IDrinkProps) => {
  for (let i = 0; i <= 14; i++) {
    // 校验当前用量是否为字符串类型，不符合则输出控制台日志
    if (typeof drink[`strMeasure${i}`] !== "string") {
      console.log(typeof drink[`strMeasure${i}`], "Detected");
    // 校验当前用量是否为空字符串，符合则输出控制台日志
    } else if (drink[`strMeasure${i}`] === "") {
      console.log("Empty string detected");
    } else {
      // 校验通过的用量推入临时数组
      filteredMeasurements.push(drink[`strMeasure${i}`]);
    }
  }
  setMeasurements(filteredMeasurements);
  getExactRecipe(ingredients, measurements); 
};

配方组合函数getExactRecipe #

将解析出的配料和对应位置的用量拼接为完整配方项，存入exactRecipe状态供弹窗渲染：

const getExactRecipe = (
  ingredients: (string | undefined)[],
  measurements: (string | undefined)[]
) => {
  let exactArray: string[] = [];
  if (ingredients.length > 0) {
    for (let i = 0; i < filteredIngredients.length; i++) {
      if (
        `${filteredIngredients[i]}` === "undefined" ||
        `${measurements[i]}` === "undefined"
      ) {
        // 无有效内容跳过处理
      } else {
        exactArray.push(`${filteredIngredients[i]} ${measurements[i]}`);
        setExactRecipe(exactArray);
      }
    }
  }
};

目前无法确定问题根因，不确定是useEffect执行逻辑、getExactRecipe函数实现，还是其他未覆盖到的代码点导致异常，求可行的排查思路。

内容的提问来源于stack exchange，提问作者Modulartable