为什么我需要调用两次props才能获取对象数组？

Question

我正在学习 React，我的组件（MyPost.jsx）需要通过 props 从 index.js 传递数组，并且它会经过所有组件 index.js -> App.js -> Profile.jsx -> MyPost.jsx。 因此，props 是 => let post = Post_postsData.Post_postsData.Profile_postsData.App_postsData 为什么我需要双重调用 Post_postData 才能获取对象数组？

- Maksymsly

---

我认为这是因为在App函数定义中定义参数时，您将所有道具作为App_postData获取，而不是将其传递给Profile_postData，例如：App_postData.App_postData。 - kengru

嗨，我已经发布了一个答案，如果它不完整或不令人满意，请评论让我可以编辑它 :) - Lucas Paixão

更聪明的做法是将在App接收到的参数命名为“props”，这样你就知道App_postData是其中的一部分了。 - kengru

快速修复方法是解构 props 以获取所需的属性：function App(App_postsData) => function App({App_postsData}) - James

@Maksymsly 如有任何问题，请在评论中提出以便我编辑回答，祝您在编程之旅中取得成功 :) - Lucas Paixão

Answer 1

示例代码：

---

请看这个例子： https://codesandbox.io/s/festive-framework-fqxqin?file=/src/App.js

import "./styles.css";

function Example(props) {
  return <h2>{props.abc}</h2>;
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Example abc={123} />
    </div>
  );
}

每个传递给React组件的属性都作为函数中的属性传递。 例如：Example是一个React组件，我正在传递abc属性，该属性将在（props）中访问。 解释：

---

函数和类组件

定义组件最简单的方法是编写一个JavaScript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个函数是一个有效的React组件，因为它接受一个单一的“props”（代表属性）对象参数和数据，并返回一个React元素。我们称这样的组件为“函数组件”，因为它们实际上是JavaScript函数。

渲染组件

const element = <Example abc="Any value" />;

当React看到表示用户定义组件的元素时，它会将JSX属性和子元素作为单个对象传递给该组件。我们称这个对象为“props”。 JSX属性： 这些属性等同于HTML元素的相同属性，例如样式、ID、类以及其他用户定义的属性，例如data-等，例如：（div元素有两个属性，即id和example，它们的值分别为123和abc） React如何工作： 它将获取每个JSX属性，并以JSON格式将其传递给您的函数，因此： ，在示例函数中可以通过props.App_postsData进行访问。

function Example(props){
    const value = props.App_postsData;
}

或者简单地说：

function Example({App_postsData}){}

---

为什么@kengru提供的例子有效？ ``` function Example({App_postsData}){} ``` 在JavaScript中，我们可以以两种方式访问JSON数据： 1：

const JSON = { example: 123 } 
const example = JSON.example;

//变量const example的值为123

2:

const JSON = { example: 123 }
const { example } = JSON;

//变量const example的值为123

- Lucas Paixão

Answer 2

很明显，您没有解构和传递帖子数组，而是直接使用props。

应该是:

App.jsx

function App({App_postsData}) {/*...*/}

Profile.jsx

function Profile ({Profile_postsData}) {/*...*/}

MyPosts.jsx

function Post ({Post_postsData}) {/*...*/}

- Aifos Si Prahs