Question

我正在尝试将值传递给子组件，但该值不会随着父组件值的更改而更新。这是我的工作

子组件：

element = driver.find_element_by_xpath('//table[@id="caccp1_content_clblContent1"]/tbody/tr[2]/td[2]')
print(driver.execute_script('return arguments[0].innerHTML', element))

父js文件

class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: this.props.data,
    }
  }

  render() {
    return(
      <div>{this.state.data}</div>
    )
  }
}


export default Test;

该值在父组件上得到更新，但是，子组件未获得更新后的值。我想念什么？

Answer 1

constructor()在开始时仅运行一次。父项更新后，它会向props发送新的Test，但是在第一次渲染组件后不会将state.data更改为props.data

您正在打印this.state变量，该变量未更新。相反，您应该从this.props

打印值

render(){
    return(
      <div>{this.props.data}</div>
      )
}

如果您想检测新道具，可以使用compnentWillRecieveProps()

componentWillRecieveProps(nextProps){
    this.setState({data:nextProps.data})
}

Answer 2

在子组件中不需要

state。渲染this.props.data应该足够了，因为那是您从父级传递给子级的内容。

子组件不会在状态更改时更新

2 个答案: