如何顯示長度不同的陣列資料

我在陣列中有 2 個物件，第一個物件比第二個物件長。我怎樣才能渲染第一個物件的所有屬性而不得到未定義，我得到未定義，因為陣列的第二個物件中只有 2 個屬性。另外，我如何計算練習的總和？

function App() {
  const course = [
    {
      name: 'Half Stack application development',
      id: 1,
      parts: [
        {
          name: 'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name: 'Using props to pass data',
          exercises: 7,
          id: 2
        },
        {
          name: 'State of a component',
          exercises: 14,
          id: 3
        },
        {
          name: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]

  // calculate total of exercises
  const totalExercises = course.reduce((total, course) => total   course.exercises, 0);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Seoul</h1>
        <Course course={course} totalExercises={totalExercises} />
      </header>
    </div>
  )
}

function Course({ course, totalExercises }) {
  return (
    <>
      <ul>
        {course.map((course) => (
          <li key={course.id}>
          <p>{course.name} {course.exercises}</p>
          <p>{course.parts[0].name}</p>
          <p>Total exercises: {course.parts[0].exercises},</p>
          <p>{course.parts[1].name}</p>
          <p>Total exercises: {course.parts[1].exercises}</p>
          // Undefined one below
          UNDEFINED <p>{course[0].parts[2].name}</p>
          </li>
        ))}
      </ul>
    </>
  );
}

uj5u.com熱心網友回復：

您可以使用將部件陣列映射到元素：

function Course({ course, totalExercises }) {
  return (
    <>
      <ul>
        {course.map((course) => (
          <li key={course.id}>
          <p>{course.name} {course.exercises}</p>
          {
              course.parts.map((part, id)=>(
                  <React.Fragment key={id}
                      <p>{part.name}</p>
                      <p>Total Excercises: {part.exercises}</p>
                  </React.Fragment>
              ))
          }
          </li>
        ))}
      </ul>
    </>
  );
}

uj5u.com熱心網友回復：

如果您不確定物件中是否存在某個鍵，并且如果它存在且沒有任何錯誤，則想要渲染它，請使用?.訪問鍵。例如

let a ={name:'Shivansh'};
console.log(a?.name,a?.id);
a ={id:3};
console.log(a?.name,a?.id);

第一個 console.log 的輸出

Shivansh undefined

第二個控制臺.log

undefined 3

如果需要，您還可以提供一個備用自定義文本，而不是使用 undefined ?? 操作員。

op1 ?? op2

如果 op1 給出 undefined 則執行 op2

前->

console.log(a?.name??'',a?.id??'')
//This will ensure you don't receive undefined but empty string.

計算 excercies 的總和->

let sum = 0;
course.forEach(course => course ? .parts ? .forEach(part => sum = sum   p 
parseInt(part ? .exercises ? ? 0)))

uj5u.com熱心網友回復：

function Course({ course, totalExercises }) {
    return (
      <>
        <ul>
          {course.map((course) => (
            <li key={course.id}>
            <p>{course.name} {course.exercises}</p>
                {course.parts.map((part,i) => {
                    return(
                        <div key={i}>
                            <p>{part.name}</p>
                            <p>Total exercises: {part.exercises},</p>
                        </div>
                    )
                })}
            </li>
          ))}
        </ul>
      </>
    );
  }

與映射 course.map(... 的方式相同，然后您可以映射每門課程的部分，上面的代碼對我來說沒有錯誤。

uj5u.com熱心網友回復：

您嘗試手動渲染一個陣列......想象您的陣列是動態的，這是一個壞主意，您如何預測陣列中的元素數量？

如下進行。

function Course({ course, totalExercises }) {
  return (
    <>
      <ul>
        {course.map((course) => (
          <li key={course.id}>
          <p>{course.name} {course.exercises}</p>
          {course.parts?.map((part, index) => (
          <div key={index}>
            <p>{part.name}</p>
            <p>Total exercises: {part.exercises},</p>
          </div>
          ))}
          </li>
        ))}
      </ul>
    </>
  );
}

我希望我的英語不會讓你感到厭煩，我會說法語

標籤：javascript 反应

上一篇：Spark/Scala/SparkSQL資料幀過濾器問題“資料型別不匹配”

下一篇：同時傳遞props和state物件，讓子組件移動父組件