Question

如何解决错误：无法分配给对象“SyntaxError”的只读属性“message”？React

2023-01-27

7951

reactjs redux redux-toolkit codesandbox

我试图在 codesandbox 中编写代码，但出现错误。我必须通过三元组进行检查。

TypeError
Cannot assign to read only property 'message' of object 'SyntaxError: /src/components/SearchResults.js: Unexpected token (8:10)

   6 |       {filteredProducts().map((product) => {
   7 |         filteredProducts().length > 0 (
>  8 |           return (
     |           ^
   9 |             <div key={product.id}>
  10 |               <li>{product.title}</li>
  11 |             </div>'

为了解决这个问题，我使用了带有 ? 和 : 的三元组我做错了什么？可能是什么？有人能帮我吗？

组件有错误

import React from "react";
const SearchResults = ({ filteredProducts }) => {
  return (
    <div>
      {filteredProducts().map((product) => {
        filteredProducts().length > 0 (
          return (
            <div key={product.id}>
              <li>{product.title}</li>
            </div>
          )
        ) : (
          return(
            <p>Item not found</p>
          )
        )
      })}
    </div>
  );
};

export default SearchResults;

Codesanbox

Answer 1

您不能在 (表达式) 内使用 return ，因为它不是函数

此外，三元语法中有“?”，如下所示

 expressionIfTrue ? (take this) : (If exp not true take this)

import React from "react";
const SearchResults = ({ filteredProducts }) => {
  return (
    <div>
      {filteredProducts().map((product) => {
        filteredProducts().length > 0 ? (
          <div key={product.id}>
            <li>{product.title}</li>
          </div>
        ) : (
          <p>Item not found</p>
        );
      })}
    </div>
  );
};

export default SearchResults;

Answer 2

您应该在 map 语句之前检查长度，如下所示：

import React from "react"

const SearchResults = ({ filteredProducts }) => {
  return (
    <div>
      {filteredProducts.length > 0 ? (
        filteredProducts().map((product) => (
          <div key={product.id}>
            <li>{product.title}</li>
          </div>
        ))
      ) : (
        <p>Item not found</p>
      )}
    </div>
  )
}

export default SearchResults

Answer 3

我遇到此问题是因为未在 map 中声明隐式返回。

type numberArray = number[];

interface listType {
  name: string;
  color: string;
  data: numberArray[];
}

其中绘图为 listType，并像这样编写地图：

yAxis: plots.map(p => {
  labels: {...}, 
  title: {text: p.name}
})

我按如下所示进行了替换，我的问题已通过使用括号包裹内部花括号或创建另一个对象并在内部花括号内明确返回该对象得到解决。

yAxis: plots.map(p => ({
  labels: {...}, 
  title: {text: p.name}
}))

希望这会对很多人有所帮助。