눌린 항목을 반응 네이티브 배열에 삽입하십시오.

Question

배열 (tagList)에 태그 개체의 목록이 있습니다.이 목록은 서버에서 가져 와서 상태에 저장하고 있습니다. 성공적으로 가져온 후 각 항목을 ScrollView 안에 매핑합니다.

export default class RegisterTags extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      tagList: [], 
      selectedTags: [], 
     } 
    } 

    componentWillMount() { 
     api.getTagsOnRegister() 
      .then((res) => { 
       this.setState({ 
        tagList: res 
       }) 
      }) 
    } 

    insertTag = (tag) =>{ 
     this.setState({ 
      selectedTags: this.state.selectedTags.push(tag) 
     }) 
    } 


    render() { 
     return(
      <View style={styles.container}> 
       <ScrollView contentContainerStyle={styles.ScrollViewContainer}> 
        {this.state.tagList.map((tag) => { 
         return(
          <View style={styles.tagStyle} key={tag.id} onPress={this.insertTag(tag)}> 
           <Text style={styles.tagText}>{tag.name}</Text> 
          </View> 
         ) 
        })} 
       </ScrollView> 
      </View> 
     ) 
    } 
} 

내가 달성하고 싶은 것은 태그 중 하나를 누르면 내가 selectedTags 배열에 해당 객체를 추가하고 싶습니다. 하지만 오류가 점점 오전 :

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount .

Possible Unhandled Promise Rejection (id: 0): _this.state.selectedTags.push is not a function TypeError: _this.state.selectedTags.push is not a function

어떻게이 selectedTags 배열에 누를 태그 항목을 추가 할 수 있습니까?

Answer 1

onPress={this.insertTag(tag)} 

문제 : 당신의 render 기능에 직접 상태를 변경하는 함수를 호출한다. Render 함수는 상태를 업데이트하는 함수를 절대로 호출해서는 안됩니다.

onPress으로 전화하는 방법은 무엇입니까?

Ans By의 : 지금 작업을 코딩 할 것인가

onPress = {() => {this.insertTag(tag) }} 

아래 작성된? 답변은 아니오입니다.

TouchableHighlight에 내면을 넣고 onPress 방법을 View에서 TouchableHighlight으로 이동해야합니다. 그러면 코드가 올바르게 작동합니다. 모든 것이 설치 속성이라고 가정합니다.

~~~~~~ 편집 중괄호onPress={this.insertTag(tag)}및onPress = {() => {this.insertTag(tag) }}

모든 것 사이의 차이는 What't 1 ~~~~~~~~

반응이 jsx 인 표현입니다. 이제 onPress={this.insertTag(tag)}은 중괄호 안에있는 표현식을 평가하고이를 onPress 속성에 할당합니다. 귀하의 경우에는 this.insertTag이 상태를 업데이트합니다.

onPress = {() => {this.insertTag(tag) }} 중괄호를 평가하면 함수가 반환되지만 해당 함수는 호출되지 않습니다. 그리고 onPress 이벤트가 트리거되면 해당 함수가 호출됩니다.

Google "더 많은 화살표 기능"