اذهب إلى المحتوى
  • 0

كيف أقوم باختصار هذا الكود مع انه 89 سطر لكنى متاكد من انه يمكنن تقليله .. React Native

أحمد عبد الله2

السؤال

السلام عليكم 

انا استخدم هذا الكود لاطبق هذه النتيجة .. 

react_challenge_album_list.thumb.png.6dd4332399b84124f68fb07ca9f4dd63.png

لكنى اشعر بانه اطول مما يجب 

كيف أقوم باختصار هذا الكود مع انه 89 سطر لكنى متاكد من انه يمكنن تقليله .. بالتاكيد هناك طريقة لاختصاره >> React Native 

import React, { useState, useEffect } from "react";
import { FlatList, StyleSheet, View, Text } from "react-native";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    getPhotos();
  }, []);

  function getPhotos() {
    axios
      .get("https://jsonplaceholder.typicode.com/photos")
      .then(async function (response) {
        setData(response.data);
      })
      .catch((err) => console.error(err));
  }

  const [user, setUser] = useState(1);
  const newData = data.filter((e) => e.albumId === user);
  console.log(newData);

  return (
    <View style={styles.con}>
      <View>


          {/* من أول هنا تبدأ المشكلة .. أريد ان انظف الكود */}
        <Text
          style={
            user === 1
              ? { backgroundColor: "red" }
              : { backgroundColor: "aqua" }
          }
          onPress={() => setUser(1)}
        >
          user one
        </Text>
        <Text
          style={
            user === 2
              ? { backgroundColor: "red" }
              : { backgroundColor: "aqua" }
          }
          onPress={() => setUser(2)}
        >
          user Two
        </Text>
        <Text
          style={
            user === 3
              ? { backgroundColor: "red" }
              : { backgroundColor: "aqua" }
          }
          onPress={() => setUser(3)}
        >
          user 3
        </Text>
        <Text
          style={
            user === 4
              ? { backgroundColor: "red" }
              : { backgroundColor: "aqua" }
          }
          onPress={() => setUser(4)}
        >
          user 4
        </Text>
      </View>

      <FlatList
        data={newData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.albumId}</Text>
            <Text>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {},
});
export default App;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

وعليكم السلام ورحمة الله وبركاته
مرحباً أحمد:
من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات

  1. إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم.
  2. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ 
    import React, { useState, useEffect } from "react";
    import { FlatList, StyleSheet, View, Text } from "react-native";
    import axios from "axios";
    
    function App() {
      const [data, setData] = useState([]);
      useEffect(() => {
        getPhotos();
      }, []);
    
      function getPhotos() {
        axios
          .get("https://jsonplaceholder.typicode.com/photos")
          .then(async function (response) {
            setData(response.data);
          })
          .catch((err) => console.error(err));
      }
    
      const [user, setUser] = useState(1);
      const newData = data.filter((e) => e.albumId === user);
      // فقط نقوم بإرجاع اللون بناءً علي الشرط
      const getBackgroundColor = (number) => {
        return user === number ?  "red" : 'aqua';
      }
      // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة
      const specialUsers = [
        {id: 1, name: 'user one'},
        {id: 2, name: 'user Two'},
        {id: 3, name: 'user Three'},
        {id: 4, name: 'user Four'},
      ];
    
      return (
        <View style={styles.con}>
    	  // هنا نقوم بعمل دوران علي المستخدمين
          {specialUsers.map(user => (
            <Text
              key={user.name}
              // هذا جزء تحسين التنسيقات 
              style={{
                backgroundColor : getBackgroundColor(user.id)
              }}
              onPress={() => setUser(user.id)}
            >
              {user.name}
            </Text>
          ))}
    
          <FlatList
            data={newData}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
              <View>
                <Text>{item.albumId}</Text>
                <Text>{item.title}</Text>
              </View>
            )}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      con: {},
    });
    export default App;

     

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال Mohammed Saber:

وعليكم السلام ورحمة الله وبركاته
مرحباً أحمد:
من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات

  1. إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم.
  2. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ 
    
    import React, { useState, useEffect } from "react";
    import { FlatList, StyleSheet, View, Text } from "react-native";
    import axios from "axios";
    
    function App() {
      const [data, setData] = useState([]);
      useEffect(() => {
        getPhotos();
      }, []);
    
      function getPhotos() {
        axios
          .get("https://jsonplaceholder.typicode.com/photos")
          .then(async function (response) {
            setData(response.data);
          })
          .catch((err) => console.error(err));
      }
    
      const [user, setUser] = useState(1);
      const newData = data.filter((e) => e.albumId === user);
      // فقط نقوم بإرجاع اللون بناءً علي الشرط
      const getBackgroundColor = (number) => {
        return user === number ?  "red" : 'aqua';
      }
      // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة
      const specialUsers = [
        {id: 1, name: 'user one'},
        {id: 2, name: 'user Two'},
        {id: 3, name: 'user Three'},
        {id: 4, name: 'user Four'},
      ];
    
      return (
        <View style={styles.con}>
    	  // هنا نقوم بعمل دوران علي المستخدمين
          {specialUsers.map(user => (
            <Text
              key={user.name}
              // هذا جزء تحسين التنسيقات 
              style={{
                backgroundColor : getBackgroundColor(user.id)
              }}
              onPress={() => setUser(user.id)}
            >
              {user.name}
            </Text>
          ))}
    
          <FlatList
            data={newData}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
              <View>
                <Text>{item.albumId}</Text>
                <Text>{item.title}</Text>
              </View>
            )}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      con: {},
    });
    export default App;

     

شكرا جزيلا أخى .. الكود صار اجمل بكثير 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...