React问答应用：如何按Question Id筛选关联答案并渲染？

这里给你一套直接可用的实现方案，分核心两步走：

1. 筛选关联答案 #

拿到目标Question Id后，用数组的filter方法从answers数组中筛选出question_id与目标Id匹配的项。注意要保证两者数据类型一致（比如同为字符串或数字），避免匹配失效：

// 假设当前要匹配的问题ID为currentQuestionId
const filteredAnswers = answers.filter(answer => answer.question_id === currentQuestionId);

2. 渲染到ListItemButtons #

用map遍历筛选后的答案数组，生成对应的ListItemButton组件，记得给每个组件添加唯一key（用答案自身的Id最稳妥）。同时处理无答案的边界情况：

import { ListItemButton, ListItemText } from '@mui/material';

// 在组件渲染部分
return (
  <div>
    {filteredAnswers.length > 0 ? (
      filteredAnswers.map(answer => (
        <ListItemButton key={answer.Id}>
          <ListItemText primary={answer.description} />
        </ListItemButton>
      ))
    ) : (
      <ListItemButton disabled>
        <ListItemText primary="暂无相关回答" />
      </ListItemButton>
    )}
  </div>
);

完整函数组件示例 #

import { useState } from 'react';
import { ListItemButton, ListItemText } from '@mui/material';

function QuestionAnswers({ currentQuestionId, answers }) {
  // 筛选当前问题对应的答案
  const filteredAnswers = answers.filter(answer => answer.question_id === currentQuestionId);

  // 可选：点击答案的处理逻辑
  const handleAnswerClick = (answerId) => {
    console.log('点击了答案：', answerId);
    // 这里可以添加跳转到详情、展开答案等逻辑
  };

  return (
    <div>
      {filteredAnswers.length > 0 ? (
        filteredAnswers.map(answer => (
          <ListItemButton 
            key={answer.Id} 
            onClick={() => handleAnswerClick(answer.Id)}
          >
            <ListItemText primary={answer.description} />
          </ListItemButton>
        ))
      ) : (
        <ListItemButton disabled>
          <ListItemText primary="还没有任何人回答这个问题" />
        </ListItemButton>
      )}
    </div>
  );
}

export default QuestionAnswers;

额外注意事项 #

• 确保currentQuestionId的取值正确，可从路由参数、组件状态或父组件props传入
• 若答案内容较长，可使用ListItemText的secondary属性展示额外信息
• 若使用其他UI库的列表组件，核心逻辑完全一致，仅需替换组件名称

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