React 帮助：在映射数组中使用 Promise 进行条件渲染 [关闭]

Posted 2023-02-22

【中文标题】React 帮助：在映射数组中使用 Promise 进行条件渲染 [关闭]

【英文标题】：React help: conditional rendering with promises inside a mapped array [closed]

【发布时间】：2021-11-28 19:07:09

【问题描述】：

我已经在一个项目中不停地工作了几天，我就是不明白发生了什么。我有一个映射并创建 React 元素的对象数组。每个元素的 props 中都携带一组数据，可用于确定该元素是否有错误 - 我的目标是显示是否有错误。似乎由于“错误”组件中的承诺，错误组件的状态没有像我预期的那样返回。我已经重新构建了一个非常简化的应用程序版本并将其链接到此处：https://codesandbox.io/s/react-playground-forked-ub4nm?file=/Error.js:179-420

我的预期结果是，当 Liquid-linter 返回字符串的结果时：% if merge %test 1 2 3% endif %，它是一个空数组并且不应该显示错误。

【参考方案1】：

一方面，如果您像在组件中那样改变状态，则应将其放置在 useEffect 中。

import React,  useState, useEffect  from "react";
import liquidlinter from "liquid-linter";

const Error = (props) => 
  const [err, setErr] = useState( active: false, message: "" );

  useEffect(() => 
    liquidlinter.lintStringPromise(props.data.liquid).then((res) => 
      const error = `$props.data.id : $res`;

      if (!err.active && res.length > 0) 
        setErr( active: true, message: error + props.data.liquid );
      
    );
  , [props.data.liquid, props.data.id, err]);

  return err.active && <span style= color: "red" > err.message</span>;
;

export default Error;

其次，我很确定你的库不能正常工作...

以下两个精简示例。第一次他们都不会记录错误，第二次他们都会记录相同的错误。这不是你的责任。

import liquidlinter from "liquid-linter";

liquidlinter.lintStringPromise("% if merge %test 3 2 1% enddif %").then(res => console.log(res));
liquidlinter.lintStringPromise("% if merge %test 1 2 3% endif %").then(res => console.log(res));

import liquidlinter from "liquid-linter";

liquidlinter.lintStringPromise("% if merge %test 1 2 3% endif %").then(res => console.log(res));
liquidlinter.lintStringPromise("% if merge %test 3 2 1% enddif %").then(res => console.log(res));

Test他们出去。翻转语句并观察控制台输出。

【讨论】：

看起来确实是库导致了这个初始错误。我可能不得不自己构建一个 linter。感谢您注意到这一点。我玩过 useEffect 钩子，但我认为我不需要它，因为所有变量都来自父组件。再次感谢。

【参考方案2】：

好了，这解决了你的问题！

import React,  useEffect, useState  from "react";
import liquidlinter from "liquid-linter";

const Error = (props) => 
  const [err, setErr] = useState( active: false, message: "" );
  useEffect(() => 
    liquidlinter.lintStringPromise(props.data.liquid).then((res) => 
      console.log(props.data.id, res);
      if (!err.active && res.length > 0) 
        setErr( active: true, message: "There's an error!" );
      
    );

    return () => setErr( active: false, message: "" );
  , [props.data.liquid, props.data.id, err.active]);
  return err.active && <span style= color: "red" > err.message</span>;
;
export default Error;

【讨论】：

感谢您的评论，但看起来@AlienWithPizza 是正确的，问题实际上出在 Liquid-linter 库上。当我尝试测试您上面的内容时，我遇到了与以前相同的问题。