無法將數組作為道具傳遞給反應組件並渲染它

Question

問題：我想將一個數組傳遞給 QuizResult 組件並需要將其顯示在

標簽。

代碼：

markedAnswers = [0,1,2,3,1,1,4,4]
<QuizResult result={markedAnswers}/>

const QuizResult = (result) => {
  return (
    <div className="result-screen">

      {result.map((data, index) => <p key={index}> {data}</p>)} - result.map is not a function error

      <div>{result}</div>  - no error, empty div is shown

    </div>
  );
};

export default QuizResult;

我在這里缺少什么？

Answer 1

在這種情況下：

const QuizResult = (result) => {

result變量是一個 object 包含所有傳遞的道具。 所以你會參考result.result數組。 相反，解構 function 中的道具：

const QuizResult = ({result}) => {

然后result將只包含數組。