使用 lodash _.forOwn 函数反应渲染？答案

【问题标题】：React render using lodash _.forOwn function?使用 lodash _.forOwn 函数反应渲染？
【发布时间】：2018-03-01 19:40:48
【问题描述】：

render() {    
  return (
    <SettingPanel>
      {!loading && _.forOwn(accessLogs, function(groupedLogs, date) {
        console.log(date);
        console.log(groupedLogs);
        console.log("=====");
        return <DayLog date={date} accessLogs={groupedLogs} />;
      })}
    </SettingPanel>
  );
}

这段代码为我生成了这个客户端错误：

warning.js:33 Warning: Failed prop type: Invalid prop `children` supplied to `SettingPanel`.
    in SettingPanel (created by AccessLogsPanel)
    in AccessLogsPanel (created by inject-AccessLogsPanel-with-teamStore-accessLogsStore)
    in inject-AccessLogsPanel-with-teamStore-accessLogsStore (created by TeamSecurity)

我犯了什么明显的错误？我只想为accessLogs 中的每个键渲染一个<DayLog /> 组件。

【问题讨论】：

你的 SettingPanel 组件是什么样子的
在 SettingsPanel 中，我在 div 包装器之间渲染 {children}。
您能否也粘贴SettingPanel 的代码，它是否定义了PropTypes？也是SettingsPanel 还是SettingPanel

标签： javascript reactjs lodash render forown

【解决方案1】：

Lodash 的 _.forOwn() 返回一个 React 无法渲染的对象。而不是_.forOwn() 使用_.map()：

render() {    
  return (
    <SettingPanel>
      {!loading && _.map(accessLogs, function(groupedLogs, date) {
        return <DayLog date={date} accessLogs={groupedLogs} />;
      })}
    </SettingPanel>
  );
}

【讨论】：

【解决方案2】：

由于 lodash _.forOwn 返回一个对象，您可能需要创建一个数组而不是 children 属性才能有效。

这样的事情可能会奏效：

render() {
  const logs = Object.keys(accessLogs).reduce((result, date) => {
    const groupedLogs = accessLogs[date];
    result.push(<DayLog date={date} accessLogs={groupedLogs} />);
    return result;
  }, []);
  return (
    <SettingPanel>
      {!loading && logs}
    </SettingPanel>
  );
}

【讨论】：