Question

我需要设置状态并在render事件上运行一个函数。我如何在React中实现这一目标？

我已经尝试将这两件事放在their own function中，但是下面给出了这个警告。

警告：setState（...）：无法在现有状态转换期间更新（例如在componentWillMount或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到editLink(onEditLink, link) { this.setState({showContent: false}); onEditLink(link); } render() { return ( <a onClick={this.editLink(this.props.onEditLink, this.props.link)}>Edit</a> ) }。

import numpy
import pandas as pd
df = pd.DataFrame({ 'LOW' : ['Abc', 'Bcd', 'CdE'], 'MID' : ['aBc', 'bCd', 'cDe'], 'HIGH': ['abC', 'bcD', 'cdE'], 'VALUE1': ['1','2','3'], 'VALUE2': ['bb','dd','ee']})
df1=df.drop(['VALUE1','VALUE2'],axis=1)

df2 = pd.DataFrame({ 'LOW' : ['Abc-4', 'Bcd-1', 'CdE'], 'MID' : ['aBc*2', 'bCd23', 'cDe&3'], 'HIGH': ['abC', 'bcD$22', 'cdE#2']})

rowsum=numpy.sum((df1==df2).astype(int),axis=1)
df_result=df2
df_result['VALUE1']=df.VALUE1*rowsum
df_result['VALUE2']=df.VALUE2*rowsum
df_result

Out[4]: 
     HIGH    LOW    MID VALUE1 VALUE2
0     abC  Abc-4  aBc*2      1     bb
1  bcD$22  Bcd-1  bCd23              
2   cdE#2    CdE  cDe&3      3     ee

Answer 1

问题是你正在调用该函数而不是分配一个新函数，该函数将在单击该元素时执行：

editLink(onEditLink, link) {
  this.setState({showContent: false});
  onEditLink(link);
}

render() {
  return (
    <a onClick={() => this.editLink(this.props.onEditLink, this.props.link)}>Edit</a>
  )
}

您要做的是传递一个函数，该函数在执行时会使用这些参数调用this.editLink函数。

Answer 2

setState接受回调函数作为其第二个参数，我建议你使用它：

editLink(onEditLink, link) {
  this.setState({showContent: false}, () => {
     onEditLink(link);
  });
}

setState（）的第二个参数是可选的回调函数这将在setState完成且组件完成后执行重新呈现。通常我们建议使用componentDidUpdate（）这样的逻辑。

在单个onClick事件上设置状态和运行功能

2 个答案: