Question

我的目标是只使用初始Json

中的一部分数据来更新父组件的状态

所以基本上如果案例text被触发：

1-我返回所需的text并在我的组件中呈现它（我成功了）

2-我也希望获取此特定数据并将其存储在父状态

3-我稍后会使用此数据创建表单

我尝试了很多东西，我终于通过将函数传递给无状态函数MyFunction来设法更新父级的状态，但我不断收到警告< / strong>因为在setState

的render方法中调用了parent Component
Warning: Cannot update during an existing state transition (such as within {渲染{1}}

or another component's constructor).

Answer 1

只需使用componentDidMount生命周期方法并维护myFunction返回的数据的状态，以避免出现此类警告

class UserComponent extends Component {
 constructor(props){
  super(props)
    this.state = {
     active: false,
     // this state stores the data returned by function
     myFunctionReturnData: ""
    }
 }

componentDidMount(){
  let myFunctionReturnData = MyFunction({ type: 'text', key: 'first_name', ...this.props });
  // Call the function and set the state by returned value
  this.setState({ myFunctionReturnData })
}
render(){
  return(
    <div>
      // Will render returned value when state will be set
      { this.state.myFunctionReturnData }
      <img src={ MyFunction({ type: 'image', key: 'avatar', ...this.props }) } />
    </div>
   )
 }
}

<强>更新::

如果您多次呼叫MyFunction，则应避免在changeParent内调用MyFunction，因为您在内部调用MyFunction并在内部调用changeParent因为你正在更新changeParent函数中的父状态，所以会把它放在循环中。根据给定的代码，我能想到的更好的解决方案就是这个

const MyFunction = props => {

   switch (props.type) {
       case 'image':
         return  props.json.data[props.key]
         break
       case 'text':
         // Remove changeParent from here
         return props.json.data[props.key]
         break
       default:
         return "Empty text"
         break
  }
}

在componentDidMount中，使用MyFunction来调用changeParent之类的

componentDidMount(){
  let myFunctionReturnData = MyFunction({ type: 'text', key: 'first_name', ...this.props });
  // Call the parent function
  this.props.changeParent(myFunctionReturnData)
}

您现在不需要维护任何状态。

如何通过调用无状态组件中的开关内的函数来更新父状态？

1 个答案: