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

Question

我的目标是仅使用初始Json中的一部分数据来更新父组件的状态

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

1-我返回所需的text并将其呈现在我的组件中（我成功完成了此操作）

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

3-我稍后将使用这些数据来创建表格

我尝试了很多事情，最终通过将函数传递给无状态函数MyFunction来设法更新了父级的状态，但是由于收到setState在parent Component的render方法中被调用的消息，所以我不断收到警告。

Warning: Cannot update during an existing state transition (such as within渲染or another component's constructor). Warning: Cannot update during an existing state transition (such as within or another component's constructor).

const MyFunction = props => {

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

class UserComponent extends Component {
 constructor(props){
  super(props)
    this.state = {
     active: false
    }
 }

render(){
  return(
    <div>
      { MyFunction({ type: 'text', key: 'first_name', ...this.props }) }
      <img src={ MyFunction({ type: 'image', key: 'avatar', ...this.props }) } />
    </div>
   )
 }
}

// Parent Component
class App extends Component {
 constructor(props){
  super(props)
  this.state = {
    json:[],
    newJson: []
  }
}

// Fetching data from an api
componentDidMount(){
fetch("https://reqres.in/api/users/2")
   .then(response => response.json())
   .then(json => {
      this.setState({json: json })
 })
}

// Update the parent Json using the data sent from the 2nd child
changeParent(jsonToUpdate){
  this.setState({
    newJson :
       jsonToUpdate
    })
 }

render() {
  return (
    <div>
      <UserComponent {...this.state} changeParent={(jsonToUpdate) => this.changeParent(jsonToUpdate)}/>
    </div>
  );
 }
}

export default App;

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 ，则应避免在MyFunction内部调用changeParent ，因为您在render内部调用MyFunction在render内部调用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)
}

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