Question

我有一个包含四个路线的应用和一个搜索组件。从那里，我想将信息数组从api传递到无状态结果表。我知道状态会在搜索组件中更新，但由于某种原因不会传递到下一个组件。

class Search extends Component {
    constructor(props) {
        super(props)
        this.state = {
                    driverLicense: null,
                    birthMonth: null,
                    birthDay: null,
                    birthYear: null,
                    showResults: false,
                    results: []
                }
    }

    componentDidMount() {
        fetch('/api/violators')
            .then(res => res.json())
            .then(results => this.setState({ results }));

然后这是对结果组件的调用

<Results
 data={this.state.results} />

路线是在app.js文件中设置的，当我运行搜索功能时，告诉我props.results未定义。这是结果代码：

import React from 'react';

import { Table } from 'semantic-ui-react';

const Results = (props) => {

        return(
            <div>
                <Table celled>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>First Name</Table.HeaderCell>
                            <Table.HeaderCell>Last Name</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        <Table.Row>
                            {props.results.map(props => 
                                <Table.Cell key={props.id}>{props.firstName}</Table.Cell>
                            )}
                            <Table.Cell>test</Table.Cell>
                        </Table.Row>
                    </Table.Body>
                </Table>
            </div>
        )
}

export default Results;

Answer 1

您正在将结果作为data属性传递，并且需要像props.data而不是props.results那样访问它

使用react-router时，是否存在将道具从有状态组件传递到无状态组件的另一种方法

1 个答案: