无法使用道具更新状态

问题描述 投票:0回答:1

发现此:https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#new-lifecycle-getderivedstatefromprops

我很确定这就是我想要的。

我正在尝试更改属性时更新状态,以在更改属性时更新视图。

((为什么我要描述的声音听起来像火箭科学?基本上是在尼安德特人讲的数组中去查看)

我的数组来自订阅(不是html.get,它只是一个穷人的商店)。

我订阅了父项,并将其作为道具传递,因为显然在同一个组件中不会进行更新。

我的问题是,getDerivedStateFromProps()会在初始化时触发,但不会在更新时触发(出于某种原因,初始化值不是从父级传递的值),并且在此之后,当我单击最终正确地console.logs时,也不再触发在父级中。

另一方面,[componentDidUpdate()根本不会触发。

我有这个:

interface Props {
    mything: string
}

interface State {
    mything: string
}

class Component extends React.Component<Props, State> {

  constructor(props: any) {
     super(props);
     this.state = { mything: ''} 
  }

  static getDerivedStateFromProps(props: Props, state: State) {
    console.log('hi', props);
    return {tanks: props.mything}
  }

  componentDidUpdate(prevProps: Props, prevState: State){
    console.log('ho');
    if(prevProps.mything !== this.props.mything){
        this.setState(state => ({
            mything: this.props.mything
        }));
    }
  }

  componentWillReceiveProps(nextProps: Props, nextContext: Props): void {
    console.log('d')
    this.setState(state => ({
        mything: this.props.mything
    }));
  }

  render() {
      return(
         {this.state.mything.map((thing: thingType, index: number) => {
            return (
               <div key={index} />
               </div>
                   )
         })}
      )
  }

道具已正确传递且可读。我可以成功地对其进行迭代,但是对于显然不是我想要执行的更新,我想将其复制到状态并对其进行迭代。

因此,为什么在上面的代码中,我指的是国家的神话而不是道具的神话。

[我对使用componentDidUpdate()getDerivedStateFromProps()不感兴趣,我只是以为它们是我的解决方案,正如您可以在上面看到的,我尝试componentWillReceiveProps()的成功率甚至更低,而且我知道它已经过时了。有UNSAFE_componentWillReceiveProps(),但仅是名字就足以让我理解我将在上游游泳。

但就目前情况而言,我找不到将道具复制到州的方法。 (当然,道具更改也会发生)。

reactjs typescript react-props react-component react-state
1个回答
0
投票

我发现在父级中声明状态并向子级传递状态(而不是全局变量)足以使子级始终使用props更新道具,而在子级中不需要任何方法。

此内容不明显,应在文档中进行解释。

© www.soinside.com 2019 - 2024. All rights reserved.