Question

我在React项目中有一个实用函数：

getTodayOpeningTime(openingTimes)

其中openingTimes是这样的对象列表，[{day: 'monday', from: '10:00', to: '22:00'}];

有时候openingTimes是null / empty，我想早点回来；

我想知道如果我想早点返回最好的方法是什么？utilities / shared函数应该保持多长时间？

这基本上是我拥有的两个选项，不知道什么是最佳编码实践：

选项1：

render() {
  if(!this.props.openingTimes && !this.props.openingTimes.length && ...) return null; // logic within the component

 const openingTimeToday = getTodayOpeningTimes(this.props.openingTimes)
 return (<p>{openingTime.from}</p>)
}

选项2：

render() {
 const openingTimeToday = getTodayOpeningTime(this.props.openingTimes) // all the logic inside the utility function
 if(!openingTimeToday) return null;
 return (<p>{openingTime.from}</p>)
}

我想知道逻辑应该放在哪里？（在React项目或任何项目中）。

Answer 1

我会使用第二版

我喜欢的东西：

我可以很容易地看到这早回来了
它抽象出了无效检查

版本1在长行的结尾处有返回值，因此在扫描时很容易错过它

也是注释，大多数JS样式指南建议将{}放在条件主体周围

Answer 2

我认为选项2更好。另外，您可以在此开发中使用类似于null object pattern的东西。这里有another link in medium。

想法是在getTodayOpeningTime内部进行验证，并在需要时返回默认值。因此，在渲染器中，您不会处理可能的空数据。

例如：

// your getTodayOpeningTime function:
function getTodayOpeningTime(currentOpeningTimes) {
    const defaultValues // your default values
    try {
        // normal flux
    } catch(reason) {
        console.error(reason);
        return defaultValues;
    }
}

// your render
    render() {
        const openingTimeToday = getTodayOpeningTime(this.props.openingTimes);
        return (<p>{openingTime.from}</p>);
    }

Answer 3

这个问题有多个正确答案。假设getTodayOpeningTime(openingTimes)总是返回有意义的东西，这里是我的，这类似于原始帖子的选项＃2：

const MyComponent = props => {
  if (props.openingTimes) {
    const openingTimeToday = getTodayOpeningTime(props.openingTimes)
    return <div>{openingTimeToday}</div>
  } else {
    return null;
  }
}

这种方法有什么好处？

我认为比原始帖子中的第一个示例更具可读性。如果将openingTimes作为属性传递给MyComponent，请计算并显示内容，否则返回null。
getTodayOpeningTime不必处理未定义。仅当定义了数据时才调用它。

我应该如何早日恢复工作？

3 个答案: