React中处理包含空对象的对象数组时如何正确执行map遍历？

问题根源 #

• 模拟数据中productId为105的商品，questions数组内是无任何属性的空对象，访问productObj.questions[0].answers时得到undefined，再访问[0]直接触发类型错误
• 搜索函数逻辑错误：过滤时直接访问question.body，但数组元素是商品对象，body属性属于商品下的单个问题对象，层级不匹配导致搜索时报错
• 当前渲染逻辑只取每个商品的第一个问题、第一个回答，既不符合多问答的业务逻辑，也没有对空数据做兼容判断

修复方案 #

1. 统一模拟数据结构规范

没有问答的商品统一将questions设为空数组，不要放无属性的空对象，避免后续判断冗余：

// 修复后的问题商品项
{
    productId: 105,
    questions: []      
},

如果确实需要保留空对象结构，给空对象加默认属性：

{
    productId: 105,
    questions: [{
      questionId: null,
      body: '',
      answers: []
    }]      
},

2. 修复Questions组件的渲染逻辑，增加空数据判断和可选链兼容

使用可选链?.避免访问不存在的属性报错，同时加条件判断，没有有效问答的商品直接显示提示文本：

import React from 'react';
import Question from './Question.jsx';
import Answer from './Answer.jsx';

const Questions = ({questionList}) => {
  return (
    <div>   
      {questionList.map(productObj => (
        <div key={productObj.productId}>
          {/* 先判断当前商品是否有有效问题 */}
          {productObj.questions?.length ? (
            // 遍历所有问题，而不是只取第一个
            productObj.questions.map(questionItem => (
              <div key={questionItem.questionId}>
                <Question 
                  questionObj={questionItem}
                  updatedDataList={questionList}
                /> 
                {/* 遍历当前问题下的所有回答 */}
                {questionItem.answers?.length ? (
                  questionItem.answers.map(answerItem => (
                    <Answer 
                      key={answerItem.answerId}
                      answerObj={answerItem} 
                      updatedDataArr={questionList}
                    />
                  ))
                ) : <p>该问题暂无回答</p>}
              </div>
            ))
          ) : <p>该商品暂无提问</p>}
        </div>
      ))}  
    </div>  
  );
};

export default Questions;

如果业务确实只需要展示第一个问题和第一个回答，把遍历逻辑换成取索引加兜底即可：

const firstQuestion = productObj.questions?.[0] ?? {}
const firstAnswer = firstQuestion.answers?.[0] ?? {}

3. 修复搜索函数的层级逻辑

搜索时要遍历商品下的所有问题，匹配问题的body属性：

const handleSearchQuestion = query => {
  if (query.length < 3) {
    setQuestions(dummyData);
    return;
  }
  // 过滤出包含匹配问题的商品
  const searchResult = dummyData.filter(product => {
    // 只要该商品下有任意一个问题包含搜索关键词就保留
    return product.questions.some(question => 
      question.body?.toLowerCase().includes(query.toLowerCase())
    )
  });
  setQuestions(searchResult);
};

内容的提问来源于stack exchange，提问作者Ronny Fitzgerald