Question

我正在使用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)

Answer 1

似乎您是在构造函数中设置数据：

asyncio.gather

初始化对象时，构造函数仅被称为一次。（在ReactJS中，它仅在第一个渲染之后调用。）

您正在呼叫async def handle_connection(conn): await conn.connect() await conn.receive_message() # ... async def run(): tasks = [] for conn in connections: tasks.append(asyncio.create_task(handle_connection(conn))) # wait until all the tasks finish await asyncio.gather(*tasks)，据我所知，其余的似乎不错。为什么不将constructor(props){ super(props); this.state = { chartData : {...} } }从构造函数移动到setState()？由于this.state = {...}会在状态更改时运行，因此您的render()调用应该可以正常工作。

这可能是不雅的，当然可以进行改进，但是它将使您朝正确的方向开始。

使用chart.js时在react.js中使用道具传递值的问题

1 个答案: