วิธี iterate และคลายแฟ้มโสดวัตถุจากอาเรย์ของวัตถุต้องจัดการพาในตอบโต้

Question 1

ฉันได้ข้อมูลบางอย่างจากรูปแบบ api นั่นมาเป็นอาเรย์ของวัตถุและจะทำการคลายแฟ้มไปไว้พวกเขาและ destructure พวกเขาดังนั้นฉันสามารถใช้มันเพื่อจัดการพาเป็นส่วนประกอบในตอบโต้. ฉันทำจะประสบผลสำเร็จบางอย่าง somewaht แต่ทางนี้ฉันจะไม่จูบแล้วก็ต้องจัดการพามันคือการสร้างรายการ 6 ครั้งแล้วสำหรับแต่ละคนของพวกเขาดังนั้นฉันต้อง 24divs.

ข้อมูลคืนมาเหมือนนี้"ทุกชั่วโมง event recurs by days"อาเรย์กับ 48 วัตถุ. ฉันอยู่แล้วเฉือนที่อาเรย์ต้องเดียวที่ใช้หกที่นั่นทั้งหมดที่ฉันต้องการ

"hourly": [
{
  "dt": 1618315200,
  "temp": 282.58,
  "feels_like": 280.4,
  "pressure": 1019,
  "humidity": 68,
  "dew_point": 276.98,
  "uvi": 1.4,
  "clouds": 19,
  "visibility": 306,
  "wind_speed": 4.12,
  "wind_deg": 296,
  "wind_gust": 7.33,
  "weather": [
    {
      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02d"
    }
  ],
  "pop": 0
},
...

นี่คือสิ่งที่ฉันมีในสมองของฉันกลับและภายในส่วนป้ายกำกับต่างๆซึ่งทำงานแต่ฉันไม่คิดว่าเป็นหนทางที่ดีที่สุดที่จะทำมันเหมือนกันมันเป็นฝันร้ายต้องรูปแบบมันเหมาะสมที่สร้างเมื่อหกรายการแต่ละครั้ง:

<div className="weather-info-extra">
    {shortedArr.map((i, index) => (
      <div key={index}>
        {new Date(i.dt * 1000).toLocaleTimeString([], {
          timeZone: timezone,
          hour: '2-digit',
          minute: '2-digit',
          hour12: true,
        })}
      </div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>{i.weather.map(w => w.description)}</div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>{i.temp} C</div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>
        <p>Rain</p>
        {i.pop}%
      </div>
    ))}
  </div>

ฉันรู้ว่ามันมีทางที่ชัดเจนว่าฉันหายตัวไปต้องเข้าใจแต่ละวัตถุจากตารางคู่ลำดับดังนั้นฉันจะจัดการพามันดีขึ้น

Question 2

คุณพูดถูกคุณสามารถทำเรื่องนี้มากกว่ามีประสิทธิภาพ คุณแค่ต้องแผนที่ครั้งหนึ่ง คุณสามารถใช้เป็นชิ้นส่วนที่ encase งหลายส่วนประกอบ,ชิ้นส่วนนี้คือไม่เคยค่าการแสดงผลแต่อนุญาตให้คุณมีหลายพวกเด็กๆ

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

ไม่จำเป็นต้องสำหรับคุณต้องแผนที่นี้อาเรย์นหลายครั้งแล้ว

แค่ด้านโน้ตชิ้นส่วนที่ไม่ต้องการกุญแจสามารถถูกเขียนที่ว่างป้ายกำกับต่างๆใน JSX:

<> /** React fragment code here */ </>

David Barker · Answer 1 · 2021-11-24T09:15:08

คุณพูดถูกคุณสามารถทำเรื่องนี้มากกว่ามีประสิทธิภาพ คุณแค่ต้องแผนที่ครั้งหนึ่ง คุณสามารถใช้เป็นชิ้นส่วนที่ encase งหลายส่วนประกอบ,ชิ้นส่วนนี้คือไม่เคยค่าการแสดงผลแต่อนุญาตให้คุณมีหลายพวกเด็กๆ

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

ไม่จำเป็นต้องสำหรับคุณต้องแผนที่นี้อาเรย์นหลายครั้งแล้ว

แค่ด้านโน้ตชิ้นส่วนที่ไม่ต้องการกุญแจสามารถถูกเขียนที่ว่างป้ายกำกับต่างๆใน JSX:

<> /** React fragment code here */ </>

ยินดีตอบแต่มันต้องแสดข้อผิดพลาดเนื่องจากไม่มียูนิค"กุญแจ"อุปกรณ์ เปลี่ยนชิ้นส่วนนี้จะเป็นขูดองชิ้นส่วนนี้หรือขูด div แล้วคุณจะเอาของฉัน upvote
ถูกของคุณ@RoMilton ฉันปรับปรุงมัน
ฮอลลี่นักบุญเพื่อน! นั่นเป็น spoooot บ! ดังนั้นตรงไปตรงมาผมรู้ว่ามันเป็นวิธีที่ดีกว่าและฉันมุ่งหน้าไปในทิศทางที่ถูกต้อแค่สำหรับชีวิตของฉันคิดไม่ออกเมื่อคืนฮ่าฮ่า! ขอบคุณ!!!

วิธี iterate และคลายแฟ้มโสดวัตถุจากอาเรย์ของวัตถุต้องจัดการพาในตอบโต้

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่