时间戳

首页 > 解决方案 > 为什么 object.property 不起作用，而 object.property.toString() 在绑定时起作用？

reactjs - 为什么 object.property 不起作用，而 object.property.toString() 在绑定时起作用？

问题描述

我是一个 React 初学者。

这行得通，我在其中引用了 chance.title.toString() （这似乎是多余的）：

function BindOpportunities(opportunities) {
    const listItems = opportunities.map((opportunity) =>
       <li key="{opportunity.opportunityId}">{opportunity.title.toString()}</li>
    );

    ReactDOM.render(
        <ul>{listItems}</ul>,
        document.getElementById('opportunity-list-view')
    );
}

并产生输出：

<li>Help Us Spread The Work About www.ImmuneAndReadyToHelp.com!</li>

...对象看起来像的地方：

{"opportunityId":"00000000-0000-0000-0000-000000000000","title":"Help Us Spread The Work About ImmuneAndReadyToHelp.com!"}

但是，这在我使用没有 .toString() 的“属性”的情况下不起作用。谁能帮我理解为什么？

function BindOpportunities(opportunities) {
    const listItems = opportunities.map((opportunity) =>
       <li key="{opportunity.opportunityId}">{opportunity.title}</li>
    );

    ReactDOM.render(
        <ul>{listItems}</ul>,
        document.getElementById('opportunity-list-view')
    );
}

注意：在回复评论时，我收到警告：

react-dom.development.js:82 警告：遇到两个具有相同密钥的孩子，{opportunity.opportunityId}. 密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持，并且可能在未来的版本中发生变化。

标签： reactjs

解决方案

首先，不要ReactDOM.render()在子节点内使用，您只需要对根节点使用这个<App />，然后子节点/组件只需要在函数组件中返回 jsx 并在类基组件的情况下从渲染方法返回

function BindOpportunities({ opportunities }) {
    return (
       <ul id="opportunity-list-view">
       { opportunities.map((opportunity) =>
       <li key={opportunity.opportunityId}>{opportunity.title}</li>
    )}
    </ul>
    );
}

const opportunities = [
  {
     "opportunityId":"00000000-0000-0000-0000-000000000000",
     "title":"Help Us Spread The Work About ImmuneAndReadyToHelp.com!"
  }
];

function App () {
   return (
     <BindOpportunities opportunities={opportunities} />
   );
}

ReactDOM.render(<App />, document.getElementById('root'));

推荐阅读