更新项目并动态更改饼图。 React.js + D3

Question

I'm making a Pie chart which reflects changes of the number of items dynamically. I could count the number of items but I stacked the point of storing data into Pie Chart after updating items.

I referred to this question : How to change states for making dynamic pie chart?

I followed the same way but my data is not updated in my pie chart.

Image of pie chart

There are 5 questions category.

Image of items

User can add and delete items. The number of items should be reflected in pie chart dynamically. I made only question1 category for now.

Code

export default class List extends React.Component {
constructor(props){
    super(props);
    this.state={
        questionItem,
        pieData : [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }]
}
}

createItem(item){
    this.state.questionItem.unshift({
        item : item,
    });
    this.setState({
        questionItem : this.state.questionItem
    });
}

findItem(item) {
    return this.state.questionItem.filter((element) => element.item === item)[0];
}

toggleComplete(item){
    let selectedItem = this.findItem(item);
    selectedItem.completed = !selectedItem.completed;
    this.setState({ questionItem : this.state.questionItem });
}

saveItem(oldItem, newItem) {
    let selectedItem = this.findItem(oldItem);
    selectedItem.item = newItem;

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label : "question2" , value : length1 },
    {label : "question3" , value : length1 },
    {label : "question4" , value : length1 }, 
    {label : "question5" , value : length1 } ]
     this.setState({ questionItem : this.state.questionItem,
                     pieData : array });
 }

deleteItem(item) {
    let index = this.state.questionItem.map(element => element.item).indexOf(item);
    this.state.questionItem.splice(index, 1);
    this.setState({ questionItem : this.state.questionItem });
}

render() {
    const { questionItem } = this.state
    return (
    <div>
    <Chart data = { this.state.pieData} /> 
    <div className="list" style={{"display" : "flex"}}>
    <div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div>
    <div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}>
    <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
    <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
    </div>
     </div>
     </div>);
}
}

class Chart extends React.Component {
render(){
var PieChart = rd3.PieChart
var pieData = [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }];

return  (
 <PieChart
  data={this.props.data}
  width={450}
  height={400} 
  radius={110}
  innerRadius={20}
  sectorBorderColor="white"
  title="Pie Chart" />
)}
}

Thank you for taking your time to read my question.

Answer 1

I figured it out. I forgot to add 'state' change to all events.

export default class List extends React.Component {
constructor(props){
    super(props);
    this.state={
        questionItem,
        pieData : [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }]
}
}

createItem(item){
    this.state.questionItem.unshift({
        item : item,
    });

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label : "question2" , value : length1 },
    {label : "question3" , value : length1 },
    {label : "question4" , value : length1 }, 
    {label : "question5" , value : length1 } ]

    this.setState({
        questionItem : this.state.questionItem,
        pieData : array
    });
}

findItem(item) {
    return this.state.questionItem.filter((element) => element.item === item)[0];
}

toggleComplete(item){
    let selectedItem = this.findItem(item);
    selectedItem.completed = !selectedItem.completed;
    this.setState({ questionItem : this.state.questionItem });
}

saveItem(oldItem, newItem) {
    let selectedItem = this.findItem(oldItem);
    selectedItem.item = newItem;

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label : "question2" , value : length1 },
    {label : "question3" , value : length1 },
    {label : "question4" , value : length1 }, 
    {label : "question5" , value : length1 } ]
     this.setState({ questionItem : this.state.questionItem,
                     pieData : array });
 }

deleteItem(item) {
    let index = this.state.questionItem.map(element => element.item).indexOf(item);
    this.state.questionItem.splice(index, 1);

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label : "question2" , value : length1 },
    {label : "question3" , value : length1 },
    {label : "question4" , value : length1 }, 
    {label : "question5" , value : length1 } ]

    this.setState({ questionItem : this.state.questionItem,
                      pieData : array
                 });
}

render() {
    const { questionItem } = this.state
    return (
    <div>
    <DataChart data = { this.state.pieData} /> 
    <div className="list" style={{"display" : "flex"}}>
    <div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div>
    <div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}>
    <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
    <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
    </div>
     </div>
     </div>);
}
}

  class DataChart extends React.Component {
  render(){
  var PieChart = rd3.PieChart
  var pieData = [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }];

  return  (
  <PieChart
  data={this.props.data}
  width={450}
  height={400} 
  radius={110}
  innerRadius={20}
  sectorBorderColor="white"
  title="Pie Chart" />
 )}
 }