توابع پر کاربرد (helper functions)

[محمد مهدی]

سلام و عرض ادب

چه جوری میتونم یک سری توابع پر کاربرد رو فقط یکبار در یک فایل بنویسم و در همه جای پروژه ازشون استفاده کنم؟

نحوه تعریف و نحوه فراخوانی شون به چه شکل هست؟

یه سوال دیگه هم داشتم اونم اینکه آیا این کار رو برای تابع fetch هم میتونم انجام بدم که با یک سری کد نویسی ها فقط از من url بگیره و خروجی رو به صورت یک لیست برگردونه؟

ممنون میشم راهنمایی کنید

[مهدی حسن زاده]

سلام.دقیقا مثل کامپوننت ها که reusable هست و میتونی در جاهای مختلف ازش استفاده کنی با توجه به props ها حالا شما یک سری توابع تعریف کن با یک سری پارامتر ها و هر جایی که لازم شد ایمپورت کن و پارامتر هاشو بهش پاس بده.مثلا برای درخواست http بهش url رو پاس بده و در تابع نتیجه رو برگردون.به همین سادگی

[محمد مهدی]

الان من یک کلاس به اسم helpers.js درست کردم و تابع زیر رو در اون قرار دادم

JavaScript

export function getListData(url) { fetch(url) .then((response) => response.json()) .then((responseJson) => { datasource = responseJson.data }) .catch((error) => { console.error(error) }); }

1 2 3 4 5 6 7

export  function getListData(url) {       fetch(url)         .then((response) => response.json())         .then((responseJson) => { datasource = responseJson.data })         .catch((error) => { console.error(error) });      }

و با دستور ایمپورت اضافه ش کرده به صفحه م و اینوطری فراخوانی کردم:

getListData("http://demo.blueco.ir/AppServices.svc/MobileVersion/1/1/")

ولی موقع فراخوانی به این ارور میخورم. محتوای تابع هر چی باشه این ارور رو میده:

TypeError:TypeError(0,_helpers.default) is not a function

[مهدی حسن زاده]

چجوری import کردید این تابع رو؟؟؟

[محمد مهدی]

سلام مجدد. کد من الان این شکلیه :

JavaScript

import { getListData } from "../../helpers/helpers"; componentDidMount() { const url = global.WebsiteUrl + "/Category_GetCategoryByParent/" + global.WebsiteUsername + "/" + global.WebsitePassword + "/0/5/0"; this.setState({ categoryDS: getListData(url) }); }

1 2 3 4 5 6 7 8 9

import { getListData } from "../../helpers/helpers";   componentDidMount() {       const url = global.WebsiteUrl + "/Category_GetCategoryByParent/" + global.WebsiteUsername + "/" + global.WebsitePassword + "/0/5/0";     this.setState({ categoryDS: getListData(url) }); }

تو قسمت cunstructor هم categoryDS رو از نوع آرایه تعریف کردم. ولی با این ارور مواجه میشم الان :

undefined is not an object (evaluating ‘this.state.categoryDS.map’)

[مهدی حسن زاده]

شما باید componentDidMount رو به صورت async فراخوانی کنید. و فراخوانی تابع به این صورت باشه
const result = await getListData(url)
this.setState({ categoryDS: result });

[محمد مهدی]

توی تابع رندر هم اینو نوشتم :

` if (this.state.categories.length == 0) {
this.state.categoryDS.map(item =>
item.map(category => {
this.state.categories.push(category)
})
);
}
‘
با توجه به نوع جی سانی که سایت تولید میکنه برام مجبورم دوبار از دستور map استفاده کنم تا به دیتای نهایی برسم . نمیدونم حالا اصلا این روشی که رفتم درست هست یا نه

[محمد مهدی]

الان کل محتوای صفحه اصلی اپلیکیشن من رو میتونید از اینجا مشاهده کنید

این چیزی که الان نوشتم داره کار میکنه و دیتا رو درست میخونه. ولی نمیدونم کدهایی که نوشتم بهینه و استاندارد هست یا نه

وقتی هم تابع fetch رو بخوام از جای دیگه صدا بزنم به اون ارور بالا میخورم

[نویسنده]

نوشته‌ها