Question

我是React的新手，试图弄清楚道具和状态是如何工作的。我想到了一个使用状态和道具的简单应用程序。它具有用于增加和减少数字的三个按钮。它实际上可以工作并更新号码。我还想在图表组件中查看数字的变化。但是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

Answer 1

即使React更新了count，您仍在使用this.state.data对push进行突变。

仅当对状态的引用发生更改时才进行重新渲染。如果选中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>

sandbox

Answer 2

我更新了linearIncrease逻辑以使其起作用：

linearIncrease() {
  this.setState(previousState => {
    return {
      // ...previousState,
      count: previousState.count + 1,
      data: [...previousState.data, {count: previousState.count + 1}],
    }
  })
}

该问题下的源代码更新计数，但不会修改数据对象。 React会比较道具，并且不会更新图表组件，因为没有更改要应用。（即使组件已更新，图表也不会更改，因为更改未在数据对象中显示）

这是工作按钮和源代码： https://stackblitz.com/edit/react-chart-state

React子图表组件未更新

2 个答案: