完全被这个 reactjs 逻辑难住了，变量没有更新组件的状态

Posted 2023-02-22

【中文标题】完全被这个 reactjs 逻辑难住了，变量没有更新组件的状态

【英文标题】：Completely stumped at this reactjs logic, of a variable not updating the state of a component

【发布时间】：2017-12-25 07:48:25

【问题描述】：

我正在使用recharts，如果data 变量在类之外，它可以正常工作。发生的情况是它加载、动画图形并显示“点”坐标。但是，如果 data 变量在类内部，它不会动画，也不会更新“点”坐标 css。

注意渲染方法中注释掉的数据，如果我取消注释，并注释掉顶部数据变量，它不起作用，但这个当前设置工作得很好。任何修复的想法？一旦这个问题得到修复，我最终想加载 this.props.data 而不是 data。

const data = [ name: '07/14/2017', mood: 6 ,  name: '07/15/2018', mood: 7 ];

class LinearGraph extends Component 

  constructor(props) 
    super(props);

  

  render() 
    //const data = [ name: '07/14/2017', mood: 6 ,  name: '07/15/2018', mood: 7 ];

    return (
      <ResponsiveContainer  >
        <LineChart
          data=data
          margin= top: 5, right: 50, left: 0, bottom: 5 
        >
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid
            strokeDasharray="3 3"
            horizontal=false
          />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey="mood"
            stroke="rgba(43, 191, 217, 0.9)"
            dot= stroke: '#ff0000', strokeWidth: 12  // this isn't working at all
            activeDot= r: 1 
            strokeWidth=5
          />
          <ReferenceLine y=7 label="Max" stroke="green" strokeDasharray="3 3" />
        </LineChart>
      </ResponsiveContainer>
    );
  

也为了更直观的理解，在这张照片中它是它工作的时候（不能显示动画，但你可以看到“点”坐标正在工作）：

在这里它不起作用：

编辑：我也尝试在 componentWillMount 中设置状态（和 componentDidMount 但后者给出了警告）：

class LinearGraph extends Component 
  constructor(props) 
    super(props);
    this.state = 
      data: [],
    ;
  

  componentWillMount() 
    this.setState( data: this.props.data );
  

  render() 
    return (
      <ResponsiveContainer  >
        <LineChart data=this.state.data />
      </ResponsiveContainer>
    );
  

【问题讨论】：

你需要遵循 React 生命周期，它会根据 prop 和 state 的变化重新渲染。您可以将data 定义为组件state 的属性吗？

如果在构造函数中我设置了 this.state = data: this.props.data，它是未定义的。现在如果我将它设置为一个空数组，我不能在渲染方法中执行 this.setState(data: this.props.data) ，它会引发大量错误，并且不确定我还能在哪里设置它由于异步加载。我不能让它成为类中的函数，然后出于同样的原因在渲染中调用它。 @JordanBonitatis

我也尝试将 this.setState 添加到 componentWillMount 和 componentDidMount。这很奇怪，因为 this.state.data 显示的是一个空数组，而 this.props.data 在方法内的控制台日志中工作得很好，因为它是异步更新的。

您似乎在构造函数中设置initialState 处于正确的轨道上。如果库不喜欢空数组，您可以将其作为带有单个空对象的数组启动，例如data: []？ （诚​​然，如果不了解图书馆的内部运作，这有点摸不着头脑）

我完全同意 Jordan 关于 React 生命周期的观点。对于异步数据，您需要使用 Kyle 在他的回答中显示的承诺。获取数据后，将设置状态。

【参考方案1】：

render 在状态变化时被调用。你需要复习一下反应component's lifecycle。最佳做法是声明您的状态，然后在生命周期 componentDidMount 函数中加载它。

class LinearGraph extends React.Component 
    constructor(props) 
        super(props);

        this.state = 
            data = []
        ;
    

    componentDidMount() 
        // Get your data here, from a const or an API
        fetch('api/get_data')
            .then(res => res.json()) // Get the json
            .then(res => this.setState(data: res.data)) // Consume the json
            .catch(err => alert('foo'));
    

    render() 
        return (
            <div>
                <LineChart data=this.state.data />
            </div>
            );
    

【讨论】：

酷，在你发帖之前我实际上是在玩这个。是否有可能让 componentDidMount 简单地拥有 this.setState(data: this.props.data)，因为 fetch 发生在父组件中并且也将数据传递给其他子组件？因为我试过了，没用

实际上它给了我一个警告并说“不要在组件中设置状态确实挂载”

这比我评论的方法更有意义；我假设data 是静态/硬编码

试试componentWillMount

我尝试了 componentWillMount 和 componentDidMount。我刚刚用更新的编辑更新了我在底部的原始帖子。还是不行:(

【参考方案2】：

哇，所以解决方法是打电话给componentWillReceiveProps，所以我只是添加了：

componentWillReceiveProps() this.setState( data: this.props.data );

它现在更新得很好，不需要回调或承诺

【讨论】：

好吧，没关系。这适用于初始加载，但如果我更改网站上的页面并返回，同样的问题。我看到了图形线，但点没有更新为适当的 css 颜色。