时间戳

首页 > 解决方案 > React 子图表组件未更新

javascript - React 子图表组件未更新

问题描述

我是 React 的新手，并试图弄清楚 props 和 states 是如何工作的。我想到了一个使用状态和道具的简单应用程序。它具有三个用于增加和减少数字的按钮。它实际上有效并更新了数字。我还想要一个图表组件来查看数字的变化。但是 React 不会更新图表。

我的 App.js 是；

import React from "react"
import ChartComponent from './Chart'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 12,
      data: [{ count: 12 }, { count: 13 }, { count: 169 }]
    }
    this.linearIncrease = this.linearIncrease.bind(this)
    this.parabolicIncrease = this.parabolicIncrease.bind(this)
    this.parabolicDecrease = this.parabolicDecrease.bind(this)
  }

  linearIncrease() {
    this.setState(previousState => {
      let prevState = previousState.data;
      prevState.push({ count: previousState.count + 1 })
      return {
        count: previousState.count + 1,
        data: prevState
      }
    })
  }

  parabolicIncrease() {
    this.setState(previousState => {
      let prevState = previousState.data;
      prevState.push({ count: previousState.count * previousState.count })
      return {
        count: previousState.count * previousState.count,
        data: prevState
      }
    })
  }

  parabolicDecrease() {
    this.setState(previousState => {
      let prevState = previousState.data;
      prevState.push({ count: Math.sqrt(previousState.count) });
      return {
        count: Math.sqrt(previousState.count),
        data: prevState
      }
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.linearIncrease}>Linear Increase!</button>
        <button onClick={this.parabolicIncrease}>Parabolic Increase</button>
        <button onClick={this.parabolicDecrease}>Parabolic Decrease</button>
        <ChartComponent data={this.state.data}></ChartComponent>
      </div>
    )
  }
}

export default App

Chart.js 文件；

import React from 'react'
import {
    LineChart, Line
} from 'recharts';


const ChartComponent = (props) => {
    return (
        <div>
            <LineChart width={300} height={100} data={props.data} >
                <Line type='monotone' dataKey='count' stroke='#8884d8' strokeWidth={2} />
            </LineChart>
        </div>
    )
}

export default ChartComponent

标签： javascriptreactjs

解决方案

即使React更新count您仍在this.state.data使用push.

React 仅在对状态的引用发生更改时重新渲染，如果您检查this.state.data === prevState.data您将得到true因为它们是相同的对象引用。这就是为什么 Chart 不会重新渲染的原因，因为 React 并没有说明Chart它data已经改变了。

最好总是创建一个新对象，然后像这样改变它，另外因为对象在 JavaScript 中是可变的，你可以使用 const 创建它们，这仍然允许你改变对象，但不会让你重新分配新值给多变的。

const prevStateData = [...previousState.data];

我还建议创建一个通用函数，它将函数作为操作和更新和状态，这将使代码更具可读性和简单性

createOperation(fn) {
  return () => {
    this.setState(prevState => {
      const count = fn(prevState.count);
      return {
        count,
        data: [...prevState.data, { count }]
      };
    });
  };
}

然后你可以像这样定义你的函数

linearIncrease(count) {
  return count + 1;
}

parabolicIncrease(count) {
  return count * count;
}

parabolicDecrease(count) {
  return Math.sqrt(count);
}

并使用它们

<button onClick={this.createOperation(this.linearIncrease)}>
  Linear Increase!
</button>
<button onClick={this.createOperation(this.parabolicIncrease)}>
  Parabolic Increase
</button>
<button onClick={this.createOperation(this.parabolicDecrease)}>
  Parabolic Decrease
</button>

沙盒

推荐阅读