プレスネームを反応ネイティブの配列に挿入します

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に電話するにはどうすればいいですか？

回答：

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

下に書かれたように、今の仕事をコーディングしますか？ 回答はいいえです。

あなたはTouchableHighlightの内側にあなたの意見を入れて、TouchableHighlightにViewからonPress方法を移動する必要があります。 あなたのコードがうまくいけばうまくいきます。私はすべてがセットアッププロパティであると仮定しています。

~~~~~~ EDIT中括弧内の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の「矢印機能」を参照してください。