React componentDidMount의 네이티브 setState가 작동하지 않습니다.

Question

componentDidMount()에 setSate을 시도했지만 상태가 변경되지 않습니다.

constructor(props) { 
    super(props); 
    this.state = { 
     links: [], 
     personalInfo: { 
     name: "", 
     phone: "", 
     email: "", 
     address: { 
      city: "", 
      state: "", 
      country: "", 
     }, 
     }, 

     statement: "", 
     editMode: false, 
     superEditMode: false, 
    } 
    } 

그리고 내 componentDidMount은 다음과 같습니다 : I는 다음과 상태를 선언

componentDidMount() { 
    if (this.props.data) { 
     this.props.data.personalInfo ? this.setState({personalInfo: this.props.data.personalInfo}) : null 
     this.props.data.address ? this.setState({address: this.props.data.address}) : null 

     //this.props.data.links ? this.setState({links: this.props.data.links}) : null 
     //console.log((this.props.data.links ? true : false)); 
     this.setState({links: [ 
     { 
      linkType: "Portfolio", 
      linkAddress: "www.johndoe.com", 
     }, 
     { 
      linkType: "Github", 
      linkAddress: "https://github.com/johndoe", 
     }, 
     { 
      linkType: "LinkedIn", 
      linkAddress: "https://linkedin.com/johndoe", 
     }, 
     ]}); 
     console.log(this.state.links); 
     this.props.data.statement ? this.setState({statement: this.props.data.statement}) : null 
    } 

예상대로 this.state.personalInfothis.state.addressthis.state.statement이 props에서 새로운 상태로 설정되고 있음을 매우 이상하지만, this.state.links 초기 상태로 남아 있습니다.

Answer 1

상태 변경으로 setState를 호출 할 때마다 강제로 다시 렌더링됩니다. 그래서, 내가 권장하는 첫 번째 일은 setState를 한 번 호출 할 수 있도록 코드를 리팩터링하는 것입니다 ...

console.log(this.state.links)은 여전히 ​​빈 배열을 표시하므로 링크 상태가 변경되지 않는다고 생각한다면, 이는 라인이 실행될 때까지 상태가 아직 업데이트되지 않았기 때문일 수 있습니다. setState는 비동기입니다. 사용해보기 ...

if (this.props.data) { 
    const { personalInfo, address, links, statement } = this.props.data; 
    this.setState({ 
     personalInfo: personalInfo || null, 
     address: address || null, 
     links: links || null, 
     statement: statement || null, 
    },() => { 
     const { personalInfo, address, links, statement } = this.state; 
     console.log({ personalInfo, address, links, statement }); 
    }) 
}