reactjs - 如何使用处理关键属性的 React 显示组件集合？

问题描述

我想显示一组日志数组：

export interface IResult {
  succeeded: boolean;
  logs: IServerLogs;
}

export interface IServerLogs {
    step1: ILog[],
    step2: ILog[],
    step3: ILog[]
}

export interface ILog {
  id: number;
  date: Date;
  msg: string;
  severity: number;
  obj?: any;
}

我在 App.tsx 中有一组 IResult

render() {
    return (
    {this.state.results.map((result, index) => (
      <Results key={index} results={result} index={index + 1} />
    ))}
   )

}

在 results.tsx 中：

render() {
    const { step1, step2, step3 } = this.props.results.logs;
    const { index } = this.props;
    return (
     <div>
            <div>
                #{index} Status: {this.props.results.ret ? "SUCCEEDED" : "FAILED"}
                <FontAwesomeIcon icon={faWindowClose} />
            </div>
            <Accordion>
                { step1.length > 0 && <Result logs={step1}  title="Step 1" /> }
                { step2.length> 0 && <Result logs={step2} title="Step 2" /> }
                { step3.length > 0 && <Result logs={step3}  title="Step 3" /> }
            </Accordion>
        </div>
   )

}

在 result.tsx 中：

render() {
    const { logs, title } = this.props;
    return (
        <AccordionItem>
            <AccordionItemTitle><b>{title}</b></AccordionItemTitle>
            <AccordionItemBody>
                <Table striped bordered hover size="sm">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Message</th>
                        <th>Obj</th>
                    </tr>
                </thead>
                <tbody>
                {
                    logs.map((log, index) =>
                    (
                        <tr key={log.id} style={{ color: log.severity == 0 ? "green": "red"}}>
                            <td key={index+1+log.id}>{moment(log.date).format("HH:mm:ss")}</td>
                            <td key={index+2+log.id}>{log.msg}</td>
                            <td key={index+3+log.id}>{log.obj}</td>
                        </tr>
                    ))
                }
                </tbody>
            </Table>
            </AccordionItemBody>
        </AccordionItem>
    );
}

有了所有这些东西，我得到以下错误：

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
    in td (created by Result)
    in tr (created by Result)
    in tbody (created by Result)
    in table (created by Table)

我尝试在这里和那里设置和删除键，但我总是在 TR 或 TD 上收到相同的错误消息......

我究竟做错了什么？

预先感谢您的帮助！

标签： reactjstypescript

reactjs - 如何使用处理关键属性的 React 显示组件集合？

问题描述

解决方案

推荐阅读