JS/React 函數返回字符串屬性但返回 [object Object]

Question

我有這個功能：

const getNameListMarkdown = (props: Props) => {
  if (isDefined(props.details)) {
    return (
      Object.keys(props.details).map(x => <p>{props.details![x].name}</p>)
    );
  }

  return '';
};

出於某種原因，當我嘗試渲染它時，它被渲染為[object Object], [object Object] ，例如，如果列表中有兩個對象。 如果我控制台記錄Object.keys它會寫出字符串，因為它應該在.name空間中。 所以它應該返回一個字符串，但它不會這樣呈現。 如果我檢查我在調用此函數的位置返回的內容，它會收到一個vNode對象，該對象可以在 children 數組中看到該字符串。 有誰知道如何正確地做到這一點？

Answer 1

<p>{props.details![x].name}</p>是JSX 。 當它被評估時，你會得到一個React元素（它是一個對象），而不是一串 HTML。

同時， Array.prototype.map給你一個數組。 所以你最終得到一個包含兩個對象的數組。

當您在數組上調用（直接或隱式） .toString()時，您會得到一個由數組的每個成員組成的字符串（因此有兩個"[object Object]" s）

---

如果你想要一個字符串，請使用模板文字而不是 JSX：

.map(x => `<p>${props.details![x].name}</p>`)