问题

I am making a const map in typescript as

export const CUSTOM_MAP = {
  'a': 'some text',
  'b': 'some text',
  'c': 'some text',
};

I want to extract the values from CUSTOM_MAP on the basis of key matching with some passed value as below and return some JSX.Element from that function to DOM.

But the below code is not returning the JSX.Element after if (key === errorStatus) condition gets true.

Maybe I am not able to return it in the proper way. Please let me know how to return the JSX.Element from the map() block of functionName().

// Function which is faulty.

const functionName = (errorStatus: string): JSX.Element => {

  Object.entries(CUSTOM_MAP).map(([key, value]) => {
    if (key === errorStatus) {
      // The code below is not able to return from here to where the functionName() is called
      return (            
        <>
          <div>
            Some HTML code with this {value}
          </div>
        </>
      );
    }
  });
  return <>
  </>;
};

export default errorCasesHandling;

export const CUSTOM_MAP = {

  'a': 'some text',
  'b': 'some text',
  'c': 'some text',
};

// Function which is faulty.

const functionName = (errorStatus: string): JSX.Element => {

  Object.entries(CUSTOM_MAP).map(([key,value]) => {
    if (key === errorStatus) {
      // below code is not able to return from here to where the functionName() is called
      return (            
        <>
          <div>
            Some html code with this {value}
          </div>
        </>
      );
    }
  });
  return <>
  </>;
};

export default errorCasesHandling;

答案1

得分: 1

你缺少了在Object.entries前面的return。尝试以下代码：

const functionName = (errorStatus: string) => {
  return Object.entries(CUSTOM_MAP).map(([key, value]) => {
    if (key === errorStatus) {
      // 以下代码无法返回到调用functionName()的地方
      return (
        <>
          <div>一些包含{value}的HTML代码</div>
        </>
      )
    }
  })
}

const functionName = (errorStatus: string) => {
  return Object.entries(CUSTOM_MAP).map(([key, value]) => {
    if (key === errorStatus) {
      // below code is not able to return from here to where the functionName() is called
      return (
        <>
          <div>Some html code with this {value}</div>
        </>
      )
    }
  })
}

答案2

得分: 0

以下是已翻译的代码部分：

const functionName = (errorStatus: string): JSX.Element => {
  let elements: JSX.Element | null = null;
  Object.entries(CUSTOM_MAP).map(([key, value]) => {
    if (key === errorStatus) {
      element = (
       // jsx元素
      );
    }
  });
  return elements || <></>;
};

export default functionName;

const functionName = (errorStatus: string): JSX.Element => {
  let elements: JSX.Element | null = null;
  Object.entries(CUSTOM_MAP).map(([key,value]) => {
    if (key === errorStatus)
    {
      element = (            
       // jsx elements
      );
    }
  });
  return elements || <></>;
};

export default functionName;

答案3

得分: 0

以下是翻译好的部分：

你的代码存在一些问题：
 - 首先，你试图返回一个JSX元素数组，因此返回值的类型应该是JSX.Element[]。
 - 其次，你没有返回map函数的结果。
 - 此外，我猜你想在条件```key === errorStatus```不满足时返回```<></>```，但你将它放在了map外面，所以你的代码应该像这样：

```javascript
const functionName = (errorStatus: string): JSX.Element[] => {
  return Object.entries(CUSTOM_MAP).map(([key, value]) => {
    if (key === errorStatus) {
      return (            
        <>
          <div>
            使用这个{value}的一些HTML代码
          </div>
        </>
      );
    }
    return <></>;
  });
};

最后，如果我误解了我所说的第三点，你可以在map之前使用过滤函数；

希望这对你有所帮助。如果你需要进一步的解释或帮助，请告诉我。

<details>
<summary>英文:</summary>

your code has some issues: 
 - first of all the you are trying to return an array of JSX elements, so the type of return values should be JSX.Element[]. 

 - second, you didn&#39;t return the result of the map function;

 - beside that, I guess you wanted to return &lt;&gt;&lt;/&gt; if the condition ```key === errorStatus``` not satisfied but you put it outside of map. so your code will be like:

const functionName = (errorStatus: string): JSX.Element[] => {
return Object.entries(CUSTOM_MAP).map(([key, value]) => {
if (key === errorStatus) {
return (
<>
<div>
Some html code with this {value}
</div>
</>
);
}
return <></>;
});
};

at the end if i misunderstood the third item that I said, you can use a filter function before the map;



</details>