Блог

Я написал код с множеством логик if else. Я пытаюсь улучшить свой код. Кто-нибудь может предложить мне несколько лучших вариантов. Я пытаюсь распечатать данные на основе условий: functionOne и secondFunction — это методы, которые будут возвращать компонент в нескольких местах. Суть моего кода такова: если длина myFirstDataArray больше 3, тогда выведите значение secondFunction , или еще раз проверьте длину myFirstDataArray и так далее.

 const functionOne = (data) => {
    return (
      <SummaryOfValues
        data={data}
      ></SummaryOfValues>
    );
  };

  const secondFunction = (data) => {
    return (
      <ListOfValues
        data={data.info}
      ></ListOfValues>
    );
  };

{
  myFirstDataArray amp;amp; myFirstDataArray.length >= 3 ? (
    <>
      <>
        {resultedDataArray
          .slice(0, 3)
          .map((data: any) => ({ secondFunction(data); }))}
      </>
    </>
  ) : (
    <>
      <>
        {resultedDataArray
          .slice(0, resultedDataArray.length)
          .map((data: any) => ({ secondFunction(data); }))}
      </>

      {myFirstDataArray amp;amp; myFirstDataArray.length === 1 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
      {myFirstDataArray amp;amp; myFirstDataArray.length === 2 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length, myFirstDataArray.length   1)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
    </>
  );
}
  

Как вы относитесь к этому решению?

 const functionOne = (data) => {
    return (
        <SummaryOfValues
            data={data}
        ></SummaryOfValues>
    );
};

const secondFunction = (data) => {
    return (
        <ListOfValues
            data={data.info}
        ></ListOfValues>
    );
};

{
    myFirstDataArray amp;amp; myFirstDataArray.length > 0 (
        <>
            <>
                {resultedDataArray
                    .slice(0, 3)
                    .map((data: any) => ({ secondFunction(data); }))}
            </>
            {myFirstDataArray.length < 3 ? (
                <>
                    {resultedDataArray
                        .slice(myFirstDataArray.length - 1)
                        .map((data: any) => ({ functionOne(data); }))}
                </>
            ) : null}
            </>
        );
}