Javascript 如何将阵列用作React组件的道具

我正在学习React，我正在建立一个网站来熟悉它。我在玩“use deencrypt effect”npm包，我试图通过道具设置它的值，但总是抛出异常“cannot read the property of undefined”

这是带有deencrypt包的my child组件：

import * as React from "react";

import { useDencrypt } from "use-dencrypt-effect";


export function TypewriterBig(values) {

  const { result, dencrypt } = useDencrypt();

  React.useEffect(() => {
    let i = 0;

    const action = setInterval(() => {
      dencrypt(values[i]);

      i = i === values.length - 1 ? 0 : i + 1;
    }, 4000);

    return () => clearInterval(action);
  }, [dencrypt]);

  return  <h2 className="TypewriterBig" >{result}</h2>;
  
} 

import*as React from“React”；
从“使用加密效应”导入{useDencrypt}；
导出函数TypewriterBig（值）{
const{result，dencrypt}=useDencrypt（）；
React.useffect（（）=>{
设i=0；
const action=setInterval（（）=>{
dencrypt（值[i]）；
i=i==values.length-1？0:i+1；
}, 4000);
return（）=>clearInterval（动作）；
}，[dencrypt]）；
返回{result}；
} 

这是我要设置道具的父组件：

import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import GlitchText from 'react-glitch-effect/core/GlitchText/Index';
import ich from './../src/img/ich.jpg';
import Media from 'react-bootstrap/Media'


import { TypewriterBig } from './TypewriterBig';



const Home = () => {

  const displayText = ["SEO-Experte", "Salesforce Experte"];


  return (
    
    <Container className="HomeContainer">
    <Row noGutters className="RowHomeContainer">
      <Col md={6} className="ContentHomeContainer" >
        <div className="ContentHome">

        <h4 className="HelloText">Hello, I'm </h4>

          <GlitchText>
          <h1 className="HomeText">This is my Hometext</h1>
          </GlitchText>
            <TypewriterBig values={displayText} />
        </div>

        
      </Col>
  
  
   
  {/*************************** Picture****************************/}
      <Col md={6} className="ImageHome" >
        <Media>
          <img
            width={'100%'}
            height={'auto'}
            className="mr-3"
            src={ich}
            alt="Generic placeholder"
          />
        </Media>
      </Col>
      
      
    </Row>
  </Container>
    );
  }
   
  export default Home;

import'bootstrap/dist/css/bootstrap.css'；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
从“react glitch effect/core/GlitchText/Index”导入GlitchText；
从“/../src/img/ich.jpg”导入ich；
从“react引导/媒体”导入媒体
从“./TypewriterBig”导入{TypewriterBig}；
常量Home=（）=>{
const displayText=[“SEO专家”、“Salesforce专家”]；
返回(
你好，我是
这是我的家庭作业
{/**********************************图片***********************************************/}
);
}
导出默认主页；

---

如何将数组displayText声明为打字机的道具？

您的组件将道具作为对象接收。 就你而言

console.log(values)
// {values: ["SEO-Experte", "Salesforce Experte"]}

您可以使用分解结构来解决此问题：

function TypewriterBig({ values }) {..}

---

组件将道具作为对象接收。 就你而言

console.log(values)
// {values: ["SEO-Experte", "Salesforce Experte"]}

您可以使用分解结构来解决此问题：

function TypewriterBig({ values }) {..}

你可以试试

export function TypewriterBig({values})

或

你可以试试

export function TypewriterBig({values})

或

---

非常感谢！只是忘了带花括号。。。它们与作为对象的值有什么关系？为什么需要它们？@Dennis1995当您编写“函数TypewriterBig（values）{..}”时，您实际做的是获取props对象并在名为“values”的TypewriterBig函数中使用。当您编写“函数TypewriterBig（{values}）{..}”时，实际上您所做的只是从props对象（又名.object destructuring）中获取“values”属性，这是相关的文档。fro道具和解构：非常感谢！只是忘了带花括号。。。它们与作为对象的值有什么关系？为什么需要它们？@Dennis1995当您编写“函数TypewriterBig（values）{..}”时，您实际做的是获取props对象并在名为“values”的TypewriterBig函数中使用。当您编写“函数TypewriterBig（{values}）{..}”时，实际上您所做的只是从props对象（又名.object destructuring）中获取“values”属性，这是相关的文档。fro道具和用于解构的：