没有立即收到道具

Question

我正在尝试通过 React 路由器将道具传递给子组件，link.When 我重新加载控制台记录的页面 3 次，第一个日志未定义，第二个显示我需要的数据，第三个日志显示未定义 again.What 我做错了吗？

这个组件是我进行外部 API 调用和抓取数据的地方，然后我将其存储到 state

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

因为您使用 link 发送状态，您可以使用 link 发送数据，并通过在路由到的组件中获取它来访问它，如下所示： this.props.location.state.

没有立即收到道具

Not immediately receiving props

javascript

reactjs

react-router-v4

react-props

react-state