Question

我有两个同级组件。在我对api进行REST调用之后，返回了一些数据。我想导航到另一个组件，然后将数据作为参数传递或使用其他方式呈现表。

FirstComponet

Axios.post('http://localhost:49776/api/Home/DoLogin', model, headers)
            .then(result => {
                console.log(result);
                this.props.history.push("/GetAllAccounts");
            });

结果是一个对象的JSON数组。

另一个组件

export class AccountDetails extends React.Component {
    componentDidMount() {
        this.setState({ data: params });
    };

    render() {
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>ID</TableHeaderColumn>
                    <TableHeaderColumn>Name</TableHeaderColumn>
                    <TableHeaderColumn>OwnerFirstName</TableHeaderColumn>
                    <TableHeaderColumn>OwnerLastName</TableHeaderColumn>
                </TableRow>
            </TableHeader>
            <TableBody>
                {data.map(item => {
                    return (
                    <TableRow>
                        <TableRowColumn>item.Id</TableRowColumn>
                        <TableRowColumn>item.Name</TableRowColumn>
                        <TableRowColumn>item.OwnerFirstName</TableRowColumn>
                        <TableRowColumn>item.OwnerLastName</TableRowColumn>
                    </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    }
}

我想使用Result对象填充另一个兄弟组件中的表。我该怎么做。

Answer 1

您可以将两个组件捆绑在一起（例如，在父组件中并以父组件的状态保存从子组件中获取的数据），也可以使用Redux之类的东西。

检查以下内容：React.js - Communicating between sibling components。

在语法上导航到同级组件，并将数据从一个组件传递到另一个组件

1 个答案: