使用 map 渲染多個 jsx 並包含拋出語法錯誤：ReactJS

Question

我正在嘗試使用map呈現 jsx，然后使用includes基於列表中存在的值顯示文本。 它拋出錯誤說"message": "Unexpected token. Did you mean {'}'} or }`。有人可以幫我解決這個問題

我嘗試過的代碼：

  return (
    <>
      {list.length
        ?
          list.map((item, idx) => {
            return (
              <span key={idx}>
                {item}
              </span>
            )}
          {list.includes("Test") && (
            <span key="test">
              Replacement
            </span> )
          }
        )
        : "-"}
    </>
  );

Answer 1

關閉大括號后，您在map function 中調用list.includes 。 我想你想要這樣的東西：

  return (
    <>
      {list.length
        ?
          (<>
           {list.map((item, idx) => {
            return (
              <span key={idx}>
                {item}
              </span>
            )}
          )}
          {list.includes("Test") && (
            <span key="test">
              Replacement
            </span> )
          }
        </>)
        : "-"}
    </>
  );