React列表元素条件渲染异常，如何正确实现列表项条件渲染？

首先，你遇到的核心问题是：直接修改数组中对象的属性不会触发React重新渲染。React只有在状态（state）或属性（props）发生不可变更新时，才会重新渲染组件。你现在直接改tickets.changeToggle，React根本感知不到这个变化，所以即使值变了，页面也不会更新。

你说的“不想直接调用setState”应该是指不想用索引跟踪的笨方法，那可以试试这些更合理的思路：

可行方案 #

1. 给每个ticket加唯一ID，基于ID生成新数组更新状态 #

把tickets数组放到组件状态里，更新时不修改原对象，而是创建新对象替换，生成新数组触发渲染：

const [tickets, setTickets] = useState(/* 初始数组，每个元素要有唯一id */);

const handleToggle = (ticketId) => {
  setTickets(prevTickets => 
    prevTickets.map(ticket => 
      ticket.id === ticketId 
        ? {...ticket, changeToggle: !ticket.changeToggle} 
        : ticket
    )
  );
};

// 渲染部分
{tickets.map((ticket) => (
  <div key={ticket.id}>
    <button onClick={() => handleToggle(ticket.id)}>Chg</button>
    <p>{ticket.changeToggle && 'hi'}</p>
  </div>
))}

核心是通过创建新对象、新数组让React检测到状态变化，从而触发重新渲染。

2. 把单个ticket抽成独立子组件 #

如果每个ticket的逻辑不复杂，直接让子组件自己管理changeToggle状态，父组件不用操心：

// 子组件 TicketItem
const TicketItem = () => {
  const [changeToggle, setChangeToggle] = useState(true);
  
  return (
    <div>
      <button onClick={() => setChangeToggle(!changeToggle)}>Chg</button>
      <p>{changeToggle && 'hi'}</p>
    </div>
  );
};

// 父组件渲染
{tickets.map((ticket, index) => (
  <TicketItem key={index} />
))}

这种方式下，子组件自己维护状态，点击时直接更新自身状态，自动触发渲染，代码更清晰。

3. 用Immer简化不可变更新 #

如果觉得手动创建新对象/数组太繁琐，可以用Immer库，它允许你用“可变”的写法，底层自动生成不可变的新状态：

import { useImmer } from 'use-immer';

const [tickets, setTickets] = useImmer(/* 初始数组 */);

const handleToggle = (ticketId) => {
  setTickets(draft => {
    const targetTicket = draft.find(t => t.id === ticketId);
    if (targetTicket) {
      targetTicket.changeToggle = !targetTicket.changeToggle;
    }
  });
};

写法和你原来直接修改对象差不多，但Immer会帮你处理不可变性，触发React重新渲染。

额外提醒 #

你原来的代码还有两个小问题：

• tickets.map((tickets) => {})里的参数名重复了，应该改成ticket（单数），避免变量名冲突。
• 渲染的JSX没有用括号包裹且无返回值，需要用()或者显式return。

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