javascript - 没有立即收到道具
问题描述
我正在尝试通过反应路由器,链接将道具传递给子组件。当我重新加载页面控制台记录3次时,第一个日志未定义,第二个显示我需要的数据,第三个日志再次显示未定义。什么是我做错了吗?
这个组件是我进行外部 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>
)
}
}
解决方案
你不应该setState
在构造函数中做。而是使用这样的道具初始化状态。
class CoinInfo extends React.Component{
constructor(props){
super(props)
this.state={
data: props
}
}
}
而且看起来你甚至不需要本地状态,你可以直接this.props.data
在你的渲染函数中使用。
推荐阅读
- react-native - 更新视图的属性 src 时出错
- node.js - 尝试启动 prod 环境时出现 NODEJS 错误
- ios - 使用 Swift 的 MapBox IOS SDK 的自定义 http 标头
- visual-studio - 具有 ms 访问数据库部署的 Visual Studio 窗体应用程序
- javascript - 将 mongo 查询的输出重定向到 csv 文件会更改日期格式
- python - 我正在尝试将 cmd 上的目录从 js 更改为 python,我该怎么做?
- javascript - 如何生成与对象中的属性关联的数组数据的所有排列?
- json - 将 indexedb 对象存储转换为 json 以使用 post 发送数据
- java - 线程“主”java.util.regex.PatternSyntaxException 中的异常:索引 9 附近的字符范围非法
- list - 如果有一个初始值,我如何创建一个函数,以便这个初始值与一个列表递归相乘?