在使用 chart.js 时使用 react.js 中的道具传递值时出现问题
Problem in passing values using props in react.js while using chart.js
我正在使用 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()
调用应该有效。
它可能不够优雅,当然可以改进,但它会让您朝着正确的方向开始。
我正在使用 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()
调用应该有效。
它可能不够优雅,当然可以改进,但它会让您朝着正确的方向开始。