Question

反应很新，我正面临着意外的行为。

我正在尝试使用我的react应用程序（来自数据可视化的ChartJS）可视化来自数据库的数据

这是我的App.js（我从create-react-app开始），在这里我从服务器的端点以JSON文件的形式获取数据，并将其传递给BarGraph组件：

class App extends Component {
    constructor() {
        super();
        this.state = {
            records_lst : [],
        }
    }

    componentWillMount() {
        this.fetchData();
    }

    fetchData() {
        let data = fetch('http://127.0.0.1:5000/api/dbrecords')
            .then((resp) => {
                resp.json().then((res) => {
                    this.setState({
                        records_lst : res,
                    });
                });
            })
    }

    render() {
        return (<div className="App">
          <BarGraph
              label1={'Toolbox - whole'}
              label2={'tu-ma'}
              textTitle={'Just a Test'}
              times={this.state.records_lst.length}
          />
        </div>);
    }
}

状态records_lst仅保存一个json数组，每个json是数据库的一行。

现在，我想做的是通过计算records_lst数组的长度来计算数据库中有多少行，并将其发送到BarGraph组件（如下所示）以显示一个带有该值，但由于某些原因，我不能！

以下是条形图：

class BarGraph extends Component {
constructor(props) {
    super(props);
    this.state = {
        chartData : {
            labels: [this.props.label1],
            datasets: [
                {
                    label: [this.props.label2],
                    data: [this.props.times]
                }
            ]
        }
    }
}

我注意到的是该组件的属性正确，因此“时间”的计算正确，但是该组件的状态未选择该数字。 Screenshot of Chrome's devtools here for clarity

最后，如果在App.js中，当我使用所有道具调用时，我将放times={44}（或任何其他数字）以正常显示该图。我猜出于同样的原因，label : [this.props.label2]也可以工作。

我在这里想念什么？

谢谢！

Answer 1

使用

data: [props.times]

代替

data: [this.props.times]

和constructor只会被调用一次，并且是从第一次加载组件开始，因为那时到那时，由于异步获取组件，您可能将没有必要的props。这样更好地使用它。

    componentwillReciveprops(props){
this.setState({data:props.times})
}

Answer 2

@mayak在上面正确说过……构造函数仅被调用一次

afaik，不要在构造函数中将道具置入您的状态。

在render方法中轮询这些道具。

class BarGraph extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        var data = {
            chartData : {
                labels: [this.props.label1],
                datasets: [
                    {
                       label: [this.props.label2],
                       data: [this.props.times]
                    }
                ]
            }
        return (
             <div>hello</div>
        }
    }
}

React-无法通过prop设置组件的状态

2 个答案: