Question

我很难理解为什么子组件没有正确接收从父级道具传递的对象。

父：

import React from 'react';

import StockSummary from '../stock_show/stock_header';

const OwnedListItem = ({ ownedStock }) => (
  <div className="">
    <h4>Ticker: {ownedStock.ticker}</h4> // works

    <StockSummary quote={ownedStock.quote} /> // throws 'undefined' error
  </div>
);

export default OwnedListItem;

孩子：

import React from 'react';

const StockSummary = ({ quote }) => (
  <div>
    <h3>Stock Summary</h3>
    <table>
      <tbody>
        <tr>
          <td>Avg Total Volume</td>
          <td>{quote.avgTotalVolume}</td>
        </tr>
        
 ...

错误

这是传递给Parent的对象，如上所示。

正如您所看到的，数据存在，我只是不了解为什么不能将对象作为道具传递给子项。

感谢。

编辑添加引用obj：

编辑添加渲染标记：

<div>
  <h3>Stock Summary</h3>
  <table>
    <tbody>
      <tr>
        <td>Avg Total Volume</td>
        <td></td>
      </tr>
      <tr>
        <td>Latest Volume</td>
        <td></td>
      </tr>
      <tr>
        <td>P/E Ratio</td>
        <td></td>
      </tr>
      <tr>
        <td>Market Cap</td>
        <td><!-- react-text: 105 -->NaN<!-- /react-text --><!-- react-text: 106 -->B<!-- /react-text --></td>
      </tr>
      <tr>
        <td>52 Week High</td>
        <td></td>
      </tr>
      <tr>
        <td>52 Week Low</td>
        <td></td>
      </tr>
      <tr>
        <td>YTD Change</td>
        <td><!-- react-text: 116 -->NaN<!-- /react-text --><!-- react-text: 117 -->%<!-- /react-text --></td>
      </tr>
    </tbody>
  </table>
</div>

编辑更改父级以映射'ownedStock'对象允许我将正确的数据传递给子级。这对你们有意义吗？

import React from 'react';
import moment from 'moment';
import StockSummary from '../stock_show/stock_summary';

const OwnedListItem = ({ ownedStock }) => (
  <div className="">
    {Object.keys(ownedStock).map(key => {
      if (key === 'quote') {
        return <StockSummary quote={ownedStock[key]} />
      }
    })}
  </div>
);

export default OwnedListItem;

编辑：子组件中的console.log(quote)

Answer 1

将此<StockSummary quote={ownedStock.quote} />更改为<StockSummary quote={ownedStock} />

Answer 2

对象可以作为道具传递给儿童。听起来ownedStock道具可能是对象的对象，而不是简单的对象。这可以解释为什么对象键上的.map()有效。我猜ownedStock就像是：

var ownedStock = {
  ABAX: {
    ticker: "GOOG",
    quote: {
      avgTotalVolume: 20
    }
  }
};

如果您不希望.map()超过ownedStock，因为您绝对肯定，ownedStock对象中只有一个项目，并且你知道它的关键，你可以这样做：

＆＃13;

var ownedStock = {
  ABAX: {
    ticker: "GOOG",
    quote: {
      avgTotalVolume: 20
    }
  }
};

const OwnedListItem = ({ ownedStock }) => (
  <div className="">
    <h4>Ticker: {ownedStock.ticker}</h4> // works

    <StockSummary quote={ownedStock.quote} />
  </div>
);

const StockSummary = ({ quote }) => (
  <div>
    <h3>Stock Summary</h3>
    <table>
      <tbody>
        <tr>
          <td>Avg Total Volume</td>
          <td>{quote.avgTotalVolume}</td>
        </tr>
      </tbody>
    </table>
  </div>
  )
  
  
ReactDOM.render(<OwnedListItem ownedStock={ownedStock.ABAX}/>, document.getElementById("app"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

如果您不知道密钥，则需要映射您已发现的对象密钥。

为什么传递给子组件的对象道具“未找到”但原语有效？

2 个答案: