React JS : 손주들 상태를 설정하는 방법

Question

나는 초급 개발자이다. 나는 손주 주를 어떻게 다루어야 하는지를 이해하기 위해 고심하고있다. (또는 손자 주를 갖는 것이 좋은지를 보아라.)

내 질문

1.이 this.setState((prevState))를 통해 손자를 변경할 수 있습니다 ...인가?

2. 상태로 손자를 갖는 것이 나쁜 생각입니까?

다음은 구성 요소의 생성자입니다.

constructor(props) { 
super(props); 
this.state = { 
    input: { 
    example: "", 
    }, 
    invalid:{ 
    example: false 
    }, 
}; 
this.handleChange = this.handleChange.bind(this); 
this.submit = this.submit.bind(this); 
} 

나는 아이로 this.state.invalid, 그리고 손자로 this.state.invalid.example 참조하십시오.

여기 JSX가 있습니다.

<div className="input"> 
    <input type="text" value={this.state.input.example || ''} onChange={this.handleChange} /> 
    { this.state.invalid.example ? <span> This input is invalid </span> : null } 
</div> 
//Here are similar input fields... 

<button onClick={this.submit} type="button">Submit</button> 

onClick={this.submit}이 발사 될 때, 나는 기능, 'this.submit'에 입력을 확인하고 싶습니다. 이 예에서

submit(){ 
for (var key in this.state.input) { 
    if(!this.state.input[key]){ 
    this.setState((prevState, key) => ({ 
     invalid[key]:true, //This causes an error, saying that "SyntaxError: Unexpected token, expected ," 
    })); 
    } 
} 

는 this.state.invalid.example (즉 변경)으로 설정하도록되어 있지만, 상기 코드는 작동하지 않는다.

아마도이 응용 프로그램을 분해하고 <div className="input">을 단일 구성 요소로 만드는 것이 좋습니다. 그렇게하기 전에 손자를 이런 방식으로 설정할 수 있는지 여부를 명확히하고 싶습니다.

저는 ReactJS를 배우고있는 저의 주위에 아무도 몰라서, 어떤 조언도 감사 할 것입니다!

Answer 1

상태에 따라 상위 구성 요소의 상태를 하위 구성 요소로 전달할 수 없습니다. 소도구로 할 수는 있지만 여러 단계로 소품을 통과시키는 결과를 가져옵니다. context도 가능하지만 좋은 방법은 아닙니다.

가장 좋은 방법은 플럭스 또는 리듀 스를 사용하는 것입니다. 나는 redux를 선호하며 redux에서는 connect 메서드를 사용하여 객체가 한 저장소에서 필요로하는 변수를 얻을 수 있습니다.

https://github.com/reactjs/react-redux/blob/master/docs/api.md

검사는 these videos

Answer 2

나는 그것이 자체 나쁜 생각 인 구성 요소 상태를 중첩 한 것으로 생각하지 않습니다. 하지만 기억

이 in the react documentation를 참조 setState

현재 상태로 nextState의 얕은 병합을 수행하는 것이 중요합니다.

그래서 당신의 상태는

{ 
    input: { 
    example: "asd", 
    other: "123" 
    }, 
    invalid: { 
    example: false, 
    other: false 
    } 
} 

경우 당신은 객체가있는 동안, 그 결과 상태가 invalid에서 모든 것이 새로운 상태로 대체

{ 
    input: { 
    example: "asd", 
    other: "123" 
    }, 
    invalid: { 
    example: true 
    } 
} 

주 같을 것이다, setState({invalid: {example: true}}) 전화 input 이하는 변경되지 않았습니다 (즉, 얕은 병합이 수행됨). 당신의 submit 기능에

, 나는 루프에서 전체 invalid 객체를 생성하고이 같은 setState 부를 것이다 : setState({invalid: invalid})합니다.

마지막 코드 세그먼트의 오류는 단순히 구문 오류 일뿐입니다. 다음과 같이 객체를 생성 할 수 없습니다 : {invalid[key]:true}, {invalid: {[key]: true}}이어야합니다. 이 작업을 수행하려면

Answer 3

, 그것을 할 수있는 방법입니다 : 당신은 물론 함수를 만들 수

constructor() { 
    this.state = { 
     input: { 
      example: "", 
     }, 
     invalid:{ 
      example: false 
     }, 
    }; 
} 

assignChildState(state) { 
    var state = Object.assign({}, this.state); 
    state.input = Object.assign({}, state.input); 
    state.input.example = "New Value"; 
    this.setState(state); 
} 

은 같은 그것을 처리하기 위해 :

function assignChildState(path, value) { 
    var pieces = path.split("."); 
    var state = Object.assign({}, this.state); 
    var current = state; 
    for (var i = 0; i < pieces.length - 1; i++) { 
     var piece = pieces[i]; 
     console.log(current, piece); 
     if (current[piece].toString() === "[object Object]") { 
      current[piece] = Object.assign({}, current[piece]); 
     } else if (typeof current[piece] === "object" /* array */) { 
      current[piece] = current[piece].concat(); 
     } 
     current = current[piece]; 
    } 
    current[pieces[i]] = value; 
    this.setState(state); 
} 

을 그리고 당신은 할 수 do :

this.assignChildState("input.example", true); 

하위 상태를 적절히 업데이트합니다.

내가 말했듯이, 나는 확실히 redux 또는 플럭스, 또는 내 개인적인 flummox를 들여다 볼 것입니다.