Question

我已经使用3个组件构建了这个小型反应应用程序，显示来自api的weatherforcaset。我不确定如何在单独的节点模块中处理utils函数是正确的方法，因为它非常特别，主要是处理日期和使用从api接收的数据创建另外5个数组。

https://github.com/c-science1/weatherForecastReact/

如果有更好的方法，请有人可以告诉我吗？

非常感谢！

Answer 1

看起来您可以在保持DRY原则的同时最小化函数中的代码。您应该重构以下方法：

this.createNewLists = function (dayName, itemP){
        let itemDate = new Date(itemP.dt_txt);
        let currentDate = new Date();
        let nextDate = new Date(); ;

        if (itemDate.getDate() == currentDate.getDate() ){
            this.day1.push(itemP);
            this.day1Name = dayName;
        }

        nextDate.setDate(nextDate.getDate() + 1);
        if (itemDate.getDate() === nextDate.getDate()){
            this.day2.push(itemP);
            this.day2Name = dayName;
        }

       nextDate.setDate(nextDate.getDate() + 1);
         if (itemDate.getDate() === nextDate.getDate()){
            this.day3.push(itemP);
            this.day3Name = dayName;
        }

        nextDate.setDate(nextDate.getDate() + 1);
        if (itemDate.getDate() === nextDate.getDate()){
            this.day4.push(itemP);
            this.day4Name = dayName;
        }

        nextDate.setDate(nextDate.getDate() + 1);
        if (itemDate.getDate() === nextDate.getDate()){
            this.day5.push(itemP);
            this.day5Name = dayName;
        }
    }

此函数中的模式正在重复它们，您可以更好地组织此代码。

您可以从1到5（对于工作日）进行迭代并最小化代码并保持干净的代码和DRY principle。

Answer 2

我会说你的应用程序的大小很好。关于我可能做的不同的事情，我不会使用utils函数包装器，因为你已经将模块作为命名空间。

对于weatherImage函数，我可能会把它放到使用它的组件文件中。如果有多个组件使用它，我可能会将其放入components/common.js。 createNewLists也可能会进入这个模块。

如何在React中编写实用程序函数，而不会使组件自身混乱

2 个答案: