当其中一个对象为空时，如何映射对象数组？

Question

我基本上是在创建一个盗版的亚马逊克隆，我正在开发Questions & Answers组件。在我的dummyData中，产品可能没有问题，因此没有答案。当我在react中映射我的问题和答案时，这会产生一个问题。我看过类似的帖子，但我相信我的情况有点不同。我试着默认一个空数组，但这对我不起作用。

DummyData.js
const dummyData = [
{
    productId: 100,
    questions: [{
      questionId: 10,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 500,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 501,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 502,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 503,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 11,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 504,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 505,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 506,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 507,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 12,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 508,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 509,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 510,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 511,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 13,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 512,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 513,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 514,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 515,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 14,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 516,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 517,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 518,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 519,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 15,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 520,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 521,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 522,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 523,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    }
  ]      
}, // etc. etc.
{ // this creates the problem so I commented it out and mapped every 0 index as you will see
    productId: 105,
    questions: [{}]      
},
];

Questions.jsx
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}>
      <Question 
      questionObj={productObj.questions[0]}
      updatedDataList={questionList}
      /> 
      <Answer 
      answerObj={productObj.questions[0].answers[0]} 
      updatedDataArr={questionList}
      />
    </div>
    ))}  
    {console.log(questionList)} 
  </div>  
  );
};

export default Questions;

index.jsx :
import React, { useState, useEffect } from 'react';
import Questions from './Questions.jsx';
import SearchBar from './SearchBar.jsx';
import AddQuestion from './AddQuestion.jsx';
import MoreAnsweredQuestions from './MoreAnsweredQuestions.jsx';
import dummyData from './dummyData.js';

const QuestionsAndAnswers = () => { 

  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    setQuestions(dummyData)
  }, [])

  const handleSearchQuestion = query => {
    if (query.length < 3) {
      setQuestions(dummyData);
    } else {
      const searchResult = questions.filter(question => question.body.includes(query));
      setQuestions(searchResult);
    }
  };

  return (
    <div>
      <h2>Questions & Answers</h2>
      <SearchBar searchQuestion={(query) => handleSearchQuestion(query)}/>
      <Questions questionList={questions} />
      <MoreAnsweredQuestions />
      <AddQuestion />
    </div>
  );
};

export default QuestionsAndAnswers;

Answer 1

您给出默认值为[{}]

尝试将其设置为[]。

不同之处在于[{}]不是空数组。