reactjs - 期望在 React JS 中的该函数 array-callback-return 的末尾返回一个值

Question

render() {

        const rowLeft = [];
        const rowRight = [];
        let a = this.props.ntn;
        

       Object.keys(this.props.ntn).map((keyName, keyIndex) =>{

        if (keyName === "_id" || keyName === "name" || keyName === "description" || keyName === "instant" || keyName === "active") {
                  if (keyName === "beacon" || keyName === "group") {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].name.toString()} key={keyIndex}/>)
          } 

        else if (a[keyName].offers) {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].offers.toString()} key={keyIndex}/>)
          }

          else {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].toString()} key={keyIndex}/>)
         }}
       
       });

       Object.keys(this.props.ntn).map((keyName, keyIndex) =>{

        if (keyName === "levelType" || keyName === "triggeringEvents" || keyName === "type" || keyName === "beacon" || keyName === "inbox") {
                  if (keyName === "beacon" || keyName === "group") {

            return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].name.toString()} key={keyIndex}/>)
          } 

        else if (a[keyName].offers) {

            return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].offers.toString()} key={keyIndex}/>)
          }

          else {

            return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].toString()} key={keyIndex}/>)
         }}
       
       });

        return (

我做了这样的事情 实际上我正在获取值并显示页面上的所有详细信息 现在出了什么问题我收到这个警告 “预计在 React JS 中此函数 array-callback-return 的末尾返回一个值” 有什么解决办法吗？怎么处理？

Answer 1

TLDR:最简单的修复方法是使用 Object.keys(this.props.ntn).forEach 而不是 .map 并进行所有返回rowLeft.push只是rowLeft.push。

长答案:

ESLint array-callback-return warning 确保您始终从 map、filter 和 reduce 等方法返回值。您首先不会在 if 中返回具有以下形式的值:

if condition1 {
   if condition2 {
      return
   }
   // here you are missing a return
}
else if ...

但是，您没有正确使用map。您应该使用 forEach。

当然，您的代码可以使用map重写，请考虑:

const {ntn} = this.props;

const rowLeft = Object.keys(ntn).map((keyName, keyIndex) => {
   const value = ntn[keyName];
   let notificationValue;   

   if (['_id', 'name', 'description', 'instant', 'active', 'beacon', 'group'].includes(keyName) {
       notificationValue = value.name.toString();
   } else if (value.offers) {
       notificationValue = value.offers.toString();
   } else {
       notificationValue = value.toString();
   }

   return (
      <InfoRow notification={keyName} notificationValue={notificationValue} key={keyIndex}/>
   );
});

另请注意，在您的示例中，第一个条件永远不会执行，因为它需要keyName同时具有两个值。我已将其替换为一个条件，我猜这就是您想要的。