如何通過在無狀態組件中的開關內調用函數來更新父狀態？

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)
}

您現在不需要維護任何狀態。