React报错求助：无法赋值只读属性'message'及三元表达式语法问题

你遇到的Unexpected token错误核心原因是三元表达式语法不完整，同时代码逻辑存在不合理之处，以下是具体排查和修复方案：

错误分析 #

1. 语法错误：三元表达式的正确结构是 条件 ? 满足条件的内容 : 不满足条件的内容，你写的filteredProducts().length > 0 ( 缺少了关键的?，导致解析失败。
2. 逻辑错误：在map函数内部判断数组长度毫无意义——如果filteredProducts()返回的数组为空，map会直接跳过执行，"Item not found"的提示永远不会被渲染。

修复后的代码 #

import React from "react";
const SearchResults = ({ filteredProducts }) => {
  // 提前获取产品列表，避免重复调用函数
  const products = filteredProducts();
  return (
    <div>
      {/* 先判断数组长度，再决定渲染列表还是空状态 */}
      {products.length > 0 ? (
        products.map((product) => (
          <div key={product.id}>
            <li>{product.title}</li>
          </div>
        ))
      ) : (
        <p>Item not found</p>
      )}
    </div>
  );
};

export default SearchResults;

关键修改点 #

• 提前将filteredProducts()的结果存入变量products，避免重复执行同一函数（优化性能，也让代码更清晰）。
• 将数组长度判断移至map外部：先判断列表是否有数据，有数据时渲染列表项，无数据时展示空状态提示。
• 修正三元表达式语法，补充缺失的?，并使用箭头函数的隐式返回（去掉冗余的return和大括号），简化代码结构。

内容的提问来源于stack exchange，提问作者Begginer