[英]Problem in passing values using props in react.js while using chart.js
我正在使用 react js 并尝试将道具从我的 app.js 发送到 chart.js 文件。 当我发送硬编码值时,值被正确发送并根据它制作图形。 但是每当我传递动态值时,都会传递值但图表未使用这些值。
应用程序.js
class App extends React.Component {
state = {
text: "",
credit: [{_id:1,financeCredit:"loading"}],
debit: [{_id:1,financeDebit:"loading"}],
}
componentDidMount(){
fetch('/data')
.then(res=> res.json())
.then(res2 => {
console.log(res2)
this.setState({
credit: res2
})
})
fetch('/data2')
.then(res=> res.json())
.then(res2 => {
console.log(res2)
this.setState({
debit: res2
})
})
}
render(){
var lengthExpense = this.state.credit.length;
console.log(lengthExpense)
var expName = [];
for (var a = 0 ; a <= lengthExpense ; a++){
if (this.state.credit[a]){
expName.push(this.state.credit[a].expenseName)
}
}
var expAmount = [];
for (var b = 0 ; b <= lengthExpense ; b++){
if(this.state.credit[b])
expAmount.push(this.state.credit[b].expenseAmount)
}
console.log(expAmount)
console.log(expName)
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Chart expam = {expAmount} expnam = {expName} />
<Route exact path = "/" component = {Home} />
</div>
</BrowserRouter>
);
}
}
export default App;
尽管以下 console.log() 显示了我想传递的所需值
console.log(expAmount)
console.log(expName)
我像这样传递这些值
<Chart expam = {expAmount} expnam = {expName} />
在chart.js 中,虽然我得到了这些值。
图表.js
class Chart extends Component{
constructor(props){
super(props);
this.state = {
chartData : {
labels: this.props.expnam,
datasets: [{
label: 'Expense',
data: this.props.expam,
backgroundColor:'rgba(255, 99, 132, 0.6)'
}]
}
}
}
render(){
console.log(this.props)
return(
<div className = "chart">
<div>
<Bar id = "chart1"
data={this.state.chartData}
options={{ maintainAspectRatio: false, }}
/>
<canvas id = "chart1" height="30vw" width="10vw" ></canvas>
</div>
</div>
)
}
}
但无法将其传递给标签和数据。 代码正常运行但没有值所以图表显示为空
constructor(props){
super(props);
this.state = {
chartData : {
labels: this.props.expnam,
datasets: [{
label: 'Expense',
data: this.props.expam,
backgroundColor:'rgba(255, 99, 132, 0.6)'
}]
}
}
}
在这个 chart.js 文件中,我可以看到从 App.js 传递的所有值。 但这些值并未用于图表(条形图)。
console.log(this.props)
似乎您正在构造函数中设置数据:
constructor(props){
super(props);
this.state = {
chartData : {...}
}
}
构造函数仅在对象初始化时调用一次。 (在 ReactJS 中,它仅在第一次渲染后调用。)
您正在调用setState()
,其余的似乎很好,我可以说。 为什么不将this.state = {...}
从构造函数移动到render()
? 由于render()
在状态更改时运行,因此您的setState()
调用应该可以工作。
它可能不优雅,当然可以改进,但它会让你朝着正确的方向开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.