Reactjs - 如何在 reactjs 材料表中加载和映射数据

Posted 2023-03-25

【中文标题】Reactjs - 如何在 reactjs 材料表中加载和映射数据

【英文标题】：Reactjs - How to load and map data in reactjs material table

【发布时间】：2019-12-12 16:43:53

【问题描述】：

如何在 reactjs 材料Table 中加载和映射数据。我通过Cards 组件将一个对象传递给子组件。当控制台日志时，我可以从父级接收对象，但它抛出 failed to compile 错误。谁能让我知道我在哪里犯了错误？

Card.tsx

function createData(type: any, description: any, volume: any) 
  return  type, description, volume ;


class Card extends Component 
 constructor(props: any) 
    super(props);
    const rows = props.value.cargo;
    rows.map((data: any) => 
      createData(data.type, data.description, data.volume);
    );
  

  render() 
    return (
      <Card className="Card">
        <CardContent className="Card-Content">
              <Table className="Card-Content__Table">
                <TableHead>
                  <TableRow>
                    <TableCell>type</TableCell>
                    <TableCell>description</TableCell>
                    <TableCell>volume</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  rows.map(row => (
                    <TableRow key=row.volume>
                      <TableCell component="th" scope="row">
                        row.type
                      </TableCell>
                      <TableCell>row.description</TableCell>
                      <TableCell>row.volume</TableCell>
                    </TableRow>
                  ))
                </TableBody>
              </Table>
        </CardContent>
      </Card>
    );
  

Cards.tsx

render() 
    return (
      <div>
        this.state.card.map((card: any) => (
          <Card key=card.id value=card />
        ))
      </div>
    );
  

【参考方案1】：

您在构造函数中定义的const rows 无法从render() 访问。它只能在构造函数中访问。如果你想创建一个可以在整个类中访问的参数，你可以这样创建它：

this.rows = props.value.cargo;

然后使用this.rows 而不仅仅是rows 访问它。

但是，对于这个示例，这没有任何意义，并且会在未来给您带来其他问题，因为 props 在渲染之间无法正确更新。

您应该在render() 中使用this.props.value.cargo.map 而不是rows.map。如果你想让它更干净，你也可以在render() 内创建另一个const rows。两者同名也没关系，因为它们在不同的范围内。