React - 배열 유형 상태에 새 요소를 추가하는 방법?

나는 해결책을 찾기 위해 this, this 및 this 링크를 거쳤지 만 그 중 어떤 것도 나를 위해 일하지 않습니다.React - 배열 유형 상태에 새 요소를 추가하는 방법?

배열 유형이 null 인 상태와 null 상태 인 decleared 상태가 있습니다.

this.state = { from: '', to: '',journeyDate: '',searchDetails: [] }

는 사용자로서 소스 도시, 목적지에 나는 아래와 같이 이러한 상태를 설정 여행 날짜 검색 양식을 채우십시오.

let from = this.state.from; 
    let to = this.state.to; 
    let journeyDate = moment(this.state.journeyDate).format('YYYY-MM-DD');

마지막 단계는 이러한 모든 변수를 searchDetails 배열 상태로 푸시하는 단계입니다. 그 때문에 나는 옵션 아래에서 시도했지만 아무도 일하지 않았다.

OPTION 1

this.setState({ searchDetails: [...this.state.searchDetails, from] });

OPTION 2

this.setState(prevState => ({ 
      searchDetails: [...prevState.searchDetails, from] 
     }))

OPTION 3

012 콘솔 로그가 비워질 때마다

let newState = this.state.searchDetails.slice(); 
     newState.push(from); 

     this.setState({ 
      searchDetails: newState 
     }); 
     console.log('final state is : ' + this.state.searchDetails);

어떤 조언이 필요합니까?

출처

2017-11-20 Dhaval

같이 업데이트 될 때 호출되는 setState의 콜백을 사용할 수 있습니까? 또한 확인했는지, 출발지, 여행지에 날짜가 있습니까?상태에서 값을 가져 와서 배열 (searchDetails)을 업데이트하는 것을 보았습니다. 그러나 값을 상태로 밀어 넣는 곳은 어디입니까? – Umesh

@Umesh from, to 및 journeyDate 상태가 완벽하게 설정되어 있으며 콘솔도 가지고 있습니다. 그래서 문제는 없습니다. – Dhaval

시도 :

this.setState({ 
    searchDetails: newState // use any of your 3 methods to set state 
},() => { 
    console.log('final state is : ' + this.state.searchDetails); 
});

setState를()는 항상 즉시 구성 요소를 업데이트하지 않습니다. 업데이트를 일괄 처리하거나 지연 할 수 있습니다.

이것은 setState()를 잠재적 인 함정이라고 부른 직후 this.state 을 읽습니다.

대신, componentDidUpdate 또는 업데이트 이 적용된 후 화재 보장 둘 중 하나의 setState를 콜백 (setState를 (갱신, 콜백))를 사용합니다. 이전 상태를 기반으로 상태를 설정해야하는 경우 아래의 업데이터 인수에 대해 읽어보십시오.

더 상세 내용은 읽어 보시기 바랍니다 :

출처

2017-11-20 05:27:08

양식 제출 searchdetails 상태를 설정하고 다음 페이지에서 this.props.searchDetails로이 세트에 액세스하려고합니다. 그래서 내 질문은 내가 this.props.searchDetails로 다음 페이지에서 searchDetails 상태의 가치를 얻을 수 있습니까? – Dhaval

읽어보기 : https://stackoverflow.com/questions/43455200/how-to-pass-data-from-one-component-to-another-in-react-or-react-redux –

https://reactjs.org/docs/react-component.html#setstate 사실 setState 비동기 방법이다. 즉, setState을 작성한 직후에 상태가 즉시 바뀔 것으로 예상 할 수 없습니다. 따라서 setState 바로 뒤에 console.log을 표시하면 새 상태 대신 마지막으로 state이 표시 될 수 있습니다. 업데이트 된 상태를 기록 할 경우 상태는 구성 요소의 전체 코드를 제공 할 수이

this.setState({ searchDetails: [...this.state.searchDetails, from] },() => { 
    console.log(this.state.searchDetails) 
});

출처

2017-11-20 05:27:33

React - 배열 유형 상태에 새 요소를 추가하는 방법?

답변

관련 문제