React中可通过函数渲染div吗？调用渲染函数页面无内容显示问题求解

核心问题 #

• 你在事件处理函数findMatches中调用renderMatchedLogs生成的JSX没有被纳入React的渲染树，既没有被存储也没有在render方法中被引用，自然不会展示到页面上
• React仅会在state或props变更时触发组件重渲染，你当前的匹配结果没有存入state，无法触发页面更新也无法被渲染逻辑读取

修改方案 #

1. 先在组件state中新增用于存储匹配结果的字段，初始化值为空数组

// 示例：组件state初始化逻辑
this.state = {
  // 保留你原有的foodLog、foodFilter等字段
  matchedLogs: []
}

2. 修改findMatches函数，将匹配结果存入state触发重渲染

findMatches = () => {
  const { foodLog, foodFilter } = this.state;
  // 筛选出所有符合条件的日志
  const matchedResult = Object.keys(foodLog)
    .filter(key => foodLog[key].foodSelectedKey.some(r => foodFilter.includes(r)))
    .map(key => foodLog[key]);
  // 写入state触发组件重渲染
  this.setState({ matchedLogs: matchedResult });
};

3. 在组件的render方法中，遍历state中存储的匹配结果，调用你写的renderMatchedLogs函数渲染内容

render() {
  return (
    <div>
      {/* 你原有render逻辑中的其他内容 */}
      <button onClick={this.findMatches}>Find Matches</button>
      {/* 新增匹配结果渲染逻辑，建议给外层元素添加唯一key属性避免React警告 */}
      {this.state.matchedLogs.map((log, index) => (
        <div key={index}>
          {this.renderMatchedLogs(log)}
        </div>
      ))}
    </div>
  )
}

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