Не сразу получать реквизит

Question

Я пытаюсь передать реквизиты дочернему компоненту через реакционный маршрутизатор, link. Когда я перезагружаю страницу, консоль регистрирует 3 раза, первый журнал не определен, второй показывает данные, которые мне нужны, а третий журнал снова показывает undefined.Что я делаю не так?

В этом компоненте я выполняю внешний вызов API и собираю данные, которые затем сохраняю, чтобы указать

class CryptoList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: {}
        }
    }
    componentDidMount = async () => {
        await this.coinCall()
    }

    coinCall = async () => {
        try {
            const data = await ApiData()
            this.setState({
                data: data
            })
        }
        catch (error) {
            throw error
        }
    }

    render() {

        const coinsArray = Array.from(this.state.data)
        const coins = coinsArray.map(coin => (
            <div><Link
                key={coin.id}
                to={{
                    pathname: `/ CoinInfo`,
                    state: { data: coin.name, }
                }}
            >
                <Coin
                    pathname={CoinInfo}
                    render={CoinInfo}
                    coinId={coin.name}
                    price={coin.market_data.current_price.usd}
                    image={coin.image.small}
                />
            </Link>
            </div>
        ))
        return (
            <div>
                <ul>{coins}</ul>
            </div>
        )
    }
}

Ниже приведен компонент, в котором яхотите отобразить данные, и они, кажется, рендерит три раза

class CoinInfo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
        this.setState({ data: props })
    }

    componentDidUpdate() {
        let data = this.state.data
        console.log("$$$", this.props)
        return (<div>{data}</div>)
    }
    render() {
        console.log("**********", this.props.data)
        return (
            <div>
                <p>working</p>
            </div>
        )
    }
}

Answer 1

Вы не должны делать setState в конструкторе. Вместо этого инициализируйте состояние с помощью реквизита, подобного этому.

class CoinInfo extends React.Component{
    constructor(props){
        super(props)
        this.state={
            data: props
        }
    }
}

Более того, похоже, что вам даже не нужно локальное состояние, вы можете напрямую использовать this.props.data внутри своей функции рендеринга.

Answer 2

так как вы отправляете состояние со ссылкой, вы можете отправлять данные со ссылкой и получать к ним доступ, получая их в компоненте, на который они направляются, например: this.props.location.state.