reactjs - 组件在我将 Prop 传递给它时停止工作

Question

嘿，我想在页面之间传递数据。有两个组件，<ResultToolbar />和 <ComparisonTable /> .工具栏包含一个 <Link/>组件，当它被点击时，它将重定向到 <ComparisonTable />通过数据。数据传输是通过传递 Prop qnaObject 完成的。进入链接组件。但是当传递 link 属性时，链接不起作用(comparisonTable 页面没有显示，但 url 确实发生了变化)。当我不通过链接组件传递任何数据时，页面重定向工作正常(url 更改并且出现比较表页面)。知道为什么吗？

这是我的 <ResultToolbar />组件:

import React from 'react';
import { Link } from 'react-router-dom';

class ResultToolbar extends React.Component {
    render() {
        let {
            qnaObject,
            compareQuery,
            compareTo,
            onCompare,
            quantity,
        } = this.props;

    return (
        <div id='result-toolbar'>
            <div id='toolbar-container'>
                <div id='toolbar-compare-container'>
                    <Link
                        to={{                                                ***this doesn't work***
                            pathname: `${compareTo}/compare${compareQuery}`,
                            qnaObject: qnaObject,
                        }}
                        onClick={onCompare}
                        // to={`${compareTo}/compare${compareQuery}`} ***this works perfectly***
                    >
                        <button id='compare-button'>
                            Compare
                            {quantity === 0 ? '' : ` (${quantity})`}
                        </button>
                    </Link>
                </div>
            </div>
        </div>
    );
}
}

export default ResultToolbar;

这是我的 <ComparisonTable />组件:

import ComparisonEntry from './ComparisonEntry';
import ComparisonHeading from './ComparisonHeading';
import TitleBox from '../SearchResult/TitleBox';
import {
    EmailIn,
    PassIn,
    TextIn,
    NumberIn,
    Button,
} from './../SearchForm/FormElements';

class ComparisonTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [],
            atrs: [],
            atrsDesc: [],
            swap: [],
            loading: true,
            category: '',
            catDesc: '',
            buyClicked: false,
            qnaObject: {},
        };
        this.getEntries = this.getEntries.bind(this);
        this.handleBuy = this.handleBuy.bind(this);
        this.handleBack = this.handleBack.bind(this);
    }
getEntries = async () => {
    this.setState({
        loading: true,
    });
    const response = await fetch(
        this.props.location.pathname + this.props.location.search
    );
    const body = await response.json();
    return body;
};

componentDidMount() {
    this.getEntries()
        .then((resolve) =>
            this.setState({
                loading: false,
                products: resolve.products,
                atrs: resolve.atrs,
                atrsDesc: resolve.atrsDesc,
                category: resolve.category,
                catDesc: resolve.description,
            })
        )
        .catch((err) => console.log(err));
}

handleBuy(event) {
    event.preventDefault();
    let toBuy = this.state.products.find(
        (item) => item.id === Number(event.target.name)
    );
    this.setState({
        swap: this.state.products,
        products: [toBuy],
        buyClicked: true,
    });
}

handleBack(event) {
    event.preventDefault();
    let toBuy = [];
    this.setState({
        products: this.state.swap,
        swap: toBuy,
        buyClicked: false,
    });
}

render() {
    console.log(this.props.location.qnaObject);
    let highlightEntry = true;
    let comparisonEntries = this.state.atrs.map((item, index) => {
        highlightEntry = !highlightEntry; //this is to alternate the shades on each entry to enhance readability
        return (
            <ComparisonEntry
                key={index}
                attribute={item}
                description={this.state.atrsDesc[index]}
                comparees={this.state.products}
                color={highlightEntry}
            />
        );
    });

    return (
        <div id='comparison-page'>
            <TitleBox title={this.state.category} text={this.state.catDesc} />

            <div id='comp-sub-container'>
                <div id='comp-table-order-container'>
                    <div id='comparison-table'>
                        <div
                            id='review-reminder'
                            style={{ display: this.state.buyClicked ? 'block' : 'none' }}
                        >
                            Check the product below
                        </div>

                        <ComparisonHeading
                            dispButt={this.state.buyClicked}
                            comparees={this.state.products}
                            onBuy={this.handleBuy}
                            onBack={this.handleBack}
                        />

                        {comparisonEntries}

                        <div
                            className='loader'
                            style={{
                                display: this.state.loading ? 'block' : 'none',
                                margin: '10rem 5rem',
                            }}
                        ></div>
                    </div>

                    <div
                        id='order-page'
                        style={{
                            display: this.state.buyClicked ? 'inline-flex' : 'none',
                        }}
                    >
                        <div id='order-page-container'>
                            <EmailIn label='Email' />
                            <TextIn label='Name' />
                            <PassIn label='password' />
                            <NumberIn label='number' />
                            <Button label='buy' />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
}

export default ComparisonTable;

Answer 1

如果您尝试在从 Link 发生的路由推送中传递数据，那么您需要在正确的属性中传递它。

Link to-object

An object that can have any of the following properties:

• pathname: A string representing the path to link to.
• search: A string representation of query parameters.
• hash: A hash to put in the URL, e.g. #a-hash.
• state: State to persist to the location.

<Link
  to={{
    pathname: `${compareTo}/compare${compareQuery}`,
    state: { qnaObject },
  }}
  onClick={onCompare}
>

在接收路由上访问

props.location.state.qnaObject