React help: conditional rendering with promises inside a mapped array [closed]-CodePudding

I've been working on this in a project non-stop for a couple days now, and I just cannot understand what is happening. I have an array of objects that is mapped and creates React elements. Carried inside the props of each element is a set of data, that can be used to determine if that element has an error or not - my goal is to display if there is an error. It seems that because of the promises in the "Error" component, the state of the error component is not returning as I would expect. I've rebuilt a much simplified version of my app and linked it here: https://codesandbox.io/s/react-playground-forked-ub4nm?file=/Error.js:179-420

My expected result is that when liquid-linter returns it's result for the string: {% if merge %}test 1 2 3{% endif %}, it's an empty array and the error should not display.

CodePudding user response：

For one thing, if you're mutating state like the way you are in your component, it should be placed in a 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;

Second of all, I'm pretty sure your library doesn't work right...

Two stripped down examples below. For the first they will both log no error, and the second they both log the same error. This is not on you.

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 them out. Flip the statements around and watch the console output.

CodePudding user response：

There you go, this fixes your problem!

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;