When using react-router, is there a different way to pass props from a stateful component to a stateless one

Question

I have an app with four routes, and a search component. from there I want to pass an array of info from an api to a stateless results table. I know that the state gets updated in the search component, but for some reason won't pass on the the next component.

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

then this is the call to results component

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

the routes are set up in the app.js file, when I run the search function tells me props.results in undefined. here is the results code:

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 prop传递，并且需要像props.data一样访问它，而不是props.results