Question

我正在尝试将数据从index.js发送到App，然后将其分发到应用程序的各个组件。在此标记Cannot read property 'name' of undefined处出现render({ name, street, state })失败

我不明白这是什么问题？

我有以下要传递的测试数据：

let data = {
    from : {
      name: "Full Name",
      street: "123 Fake St.",
      state: "Boston, MA 02118",
    },
    to : {
      name: "Mrs. Receiver",
      street: "123 Fake St.",
      state: "San Francisco, CA 94101",
    }
  }

然后，我有这个班级接受它并将其发送给它的孩子

class App extends Component {
  render() {
    const { from, to } = {...this.props.data }

    return (
      <div className="Envelope">
        <Stamp />
        <From data={ from } />
        <To data={ to } />
      </div>
    );
  }
}

然后，我有一个孩子，例如：

  render({ name, street, state }) {
    return (
      <div className="From">
            <span>
                { name }
            </span>
            <br />
            <span>
                { street }
            </span>
            <br />
            <span>
                { state }
            </span>
      </div>
    )
  }

Answer 1

不知道我是否正确回答了你的问题。

渲染器不接收参数。

您可以将其包装在演示组件中。

const Child = ({name,street,state}) => (<div> className="From"> 
   <span>{ name }</span>
            <br />
    <span>{ street }</span>
            <br />
   <span>{ state }</span></div>)

，然后像

一样使用

<Child name={name} street={street} state={state} />

如果您有更复杂的逻辑，则应考虑使用一个类并扩展React.Component

Answer 2

主要问题似乎是当它是全局变量时，您将data称为this.props.data。

因此它应该是const { from, to } = {...data }。

Answer 3

我让它工作了，并在下面发布了答案。

所以首先我的文件如下：

-index.js
-app.js
--Components (folder)
--From.js
--To.js

最初，我在下面有数据声明

let data = {
  from : {
    name: "Full Name",
    street: "123 Fake St.",
    state: "Boston, MA 02118",
  },
  to : {
    name: "Mrs. Receiver",
    street: "123 Fake St.",
    state: "San Francisco, CA 94101",
  }
}

在index.js内，并通过<App data={data}将数据发送到App.js，相反，我将其移动到App.js本身，而无需将数据发送到App.js。然后，我为App.js编写了以下代码：

<From
        name={data.from.name}
        street={data.from.street}
        state={data.from.state}
    />
    <To
        name={data.to.name}
        street={data.to.street}
        state={data.to.state}
    />

将数据发送到“从”和“到”组件。然后，我在下面为From.js和To.js编写了简单的函数：

From.js

export default function From({name, street, state}) {
  return (
    <div>
      {name} <br />
      {street} <br />
      {state}
    </div>
  )
}

To.js

import React from 'react'

export default function To({name, street, state}) {
  return (
    <div>
      {name} <br />
      {street} <br />
      {state}
    </div>
  )
}

这样做有助于我更好地理解道具的逻辑，希望这对有问题的人有所帮助...

反应发送道具给孩子

3 个答案: