Question

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)

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

Answer 1

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

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

Answer 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>
  );
}

使用lodash _.forOwn函数进行反射渲染？

2 个答案: