React Todo列表出现空字段，如何过滤服务器返回的status字段

看起来你遇到的情况是：从服务器获取的todo数据里存在无效条目，导致渲染出空的任务行。结合你提到的status字段问题，大概率是服务器返回的todos数组里，有部分条目缺少title字段（或者title为undefined），而这些条目可能附带了status字段，最终导致空行出现。下面是几个可行的解决办法：

1. 在数据获取阶段过滤无效条目 #

修改你的fetchtodos Action，在将数据dispatch到Redux Store之前，先过滤掉不符合要求的todo项——比如只保留包含有效title的条目：

export const fetchtodos = () => async dispatch => { 
  const token = localStorage.getItem('token'); 
  const response = await todosApi.get('/todos', { headers: { Authorization: token } }); 
  // 过滤掉title不存在、为空或仅含空白字符的条目
  const validTodos = response.data.filter(todo => 
    todo.title && typeof todo.title === 'string' && todo.title.trim() !== ''
  );
  dispatch({ type: FETCH_TODOS, payload: validTodos }); 
};

这种方式从数据源就把无效数据排除掉，后续所有使用该Store数据的组件都不会再遇到空字段问题。

2. 在组件渲染时做兜底处理 #

如果你不想修改Action逻辑，也可以直接在列表渲染环节处理，有两种思路：

思路一：渲染前过滤无效todo #

修改todosList方法，先过滤再渲染：

todosList() { 
  return this.props.todos
    // 先过滤掉无效的todo条目
    .filter(todo => todo.title && todo.title.trim() !== '')
    .map((currentTodo, i) => { 
      return <TodosList todo={currentTodo} key={i} />; 
    }); 
}

思路二：给空title设置兜底文本 #

如果不想过滤条目，而是希望显示“无标题”之类的文本代替空字段，可以修改TodosList组件：

const TodosList = props => ( 
  <tr> 
    <td className={props.todo.completed ? "completed" : "TableText"}> 
      <div className="TodoTableContent"> 
        <Link to={"/edit/" + props.todo._id} className="TodoLinkContent"> 
          {/* 当title为空/undefined时，显示兜底文本 */}
          {props.todo.title ? props.todo.title : '无标题'}
        </Link> 
        <Link to={"/delete/" + props.todo._id} className="a_edit"> 
          <img src={Trash} alt="Usuń" className="Deletefavicon" /> 
        </Link> 
      </div> 
    </td> 
  </tr> 
);

额外建议：检查服务器接口 #

你提到空字段和服务器返回的status字段有关，建议先确认服务器/todos接口返回的数据结构，看看是否有条目仅包含status字段而缺少title、_id等必要字段。如果是服务器创建任务时返回的数据格式有问题，最好同步修复后端逻辑，确保创建后的todo对象包含完整的必要字段，从根源避免这类问题。

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