Question

嘿，我想在页面之间传递数据。有两个组成部分，<ResultToolbar />和<ComparisonTable />。工具栏包含一个<Link/>组件，单击该组件将通过传递的数据重定向到<ComparisonTable />。通过将prop qnaObject传递到链接组件中来完成数据传输。但是，当链接属性通过时，该链接将无法正常工作（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

可以具有以下任意属性的对象：

pathname：代表链接路径的字符串。

search：查询参数的字符串表示形式。

hash：网址中的哈希值，例如＃a-hash。

state：声明要保留到该位置。

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

要在接收路线上访问

props.location.state.qnaObject

<Link />组件在传递道具时停止工作

1 个答案: