지정 값에

Question

반응 나는 국가의 구조는 다음과 같습니다

this.state = { 
    data: { 
     tags: [] 
    }, 
    items: [], 
    input: '' 
}; 

나는 데이터를 제출

, 내가 항목 배열 데이터와 태그의 배열을 할당하려고합니다.

var newData = this.state.items.slice(); //copy array 
this.setState({ 
    ...this.state, 
    data: { ...this.state.data, tags: newData } 
}); 

newData 안에 모든 변수를 가지고 있지만, tags은 항상 비어 있습니다. 태그 배열에 정확히 같은 값을 할당하려면 어떻게해야합니까?

console.log(this.state.data.tags, this.state.items); 

이

enter image description here

UPDATE : 여기

내 콘솔 로그 당신이 상태를 설정하면

onSubmit = (e) => { 
    e.preventDefault(); 
    const errors = this.validate(this.state.data); 
    this.setState({ errors }); 
    if (Object.keys(errors).length === 0) { 
     this.setState({ loading: true }); 
     this.setState(prevState => ({ 
      data: { 
      ...prevState.data, 
      tags: prevState.items 
      } 
     })); 
     console.log(this.state.data.tags, this.state.items); 
     this.props 
     .submit(this.state.data) 
     .catch(err => 
      this.setState({ errors: err.response.data.errors, loading: false }) 
     ); 
     } 
    }; 

Answer 1

, 당신은 객체로 현재 상태를 확산하지 마십시오 지나가고있어. setState은 첫 번째 인수로 객체를 가져오고 만은 해당 객체의 키를 업데이트합니다. 따라서, 예를 들어 우리는이 있다면 :

this.state = { 
    a: 1, 
    b: 2 
}; 

이 사용 :

this.setState({ 
    b: 3 
}); 

만 b 업데이트됩니다. a은 영향을받지 않습니다. 또한 setState은 비동기식이므로 setState 내부의 상태를 참조하는 것이 안전하지는 않습니다.

this.setState(prevState => ({ 
    data: { 
    ...prevState.data, 
    tags: prevState.items 
    } 
})); 

이 단지 이전 상태의 items 배열 상태에서 data 개체 만 tag 속성을 업데이트합니다 : 따라서, 반작용은 이전 상태에 액세스하기 위해 콜백을 제공합니다.