我正在使用react js并尝试将Props从我的app.js发送到chart.js文件。当我发送硬编码的值时，将正确发送值，并根据它进行绘制。但是，每当我传递动态值时，就会传递值，但图表不会使用这些值。
App.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中，尽管我获得了这些值。
Chart.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()呼叫应该可以正常工作。
它可能并不优雅，当然可以进行改进，但是它将使您朝正确的方向开始。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句