Как я могу заставить SetState прекратить перезаписывать мои теги компонентов - PullRequest
Новая
       11

Как я могу заставить SetState прекратить перезаписывать мои теги компонентов

1 голос
/ 06 февраля 2020

Я использую эти теги в своем собственном приложении реакции: https://github.com/peterp/react-native-tags Будучи реагирующей ладьей ie У меня проблема с SetState. Я настроил теги так: 

<Tags
      initialText=""
      textInputProps={{
           placeholder: "Servicable Postcodes"
      }}
      initialTags={["3121"]}
      onChangeTags={(tags) => this.changeTags(tags)}
      inputStyle={{ backgroundColor: "white", borderBottomWidth: 1 }}
      renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
           <TouchableOpacity key={${tag}-${index}} onPress={onPress}>
                <Text style={styles.tagStyle}>{tag}</Text>
           </TouchableOpacity>
      )}
 />


 changeTags(newtags) {
      //this.setState({ myTags: newtags.toString()});
      var tagList = newtags.toString();
      /*this.setState({myTags: tagList}, function () {
           console.log(this.state.myTags);
      });*/
  }

Добавление тегов работает следующим образом [3121] [1111] [2222]

Так что код работает хорошо. Как только я раскомментирую setState, он будет работать как обычно, но тег не будет добавлен в список. Поэтому, если я добавлю 1111, мой консольный журнал будет 3121, 1111 (но 1111 не будет отображаться как тег), тогда, если я попытаюсь добавить другой, это будет 3121, 2222 et c.

Я думаю потому что он перерисовывает с помощью setState, тэг никогда не добавляется / не перезаписывается, и я просто продолжаю оставаться с одним тэгом 3121. Или, может быть, я реактивный нуб и понятия не имею.

Любая помощь приветствуется.

Спасибо

1 Ответ

1 голос
/ 06 февраля 2020

Вы правы, говоря, что при каждом рендеринге компонент Tag возвращается к 3121.

Чтобы избежать этого, вам нужно хранить текущие теги в вашем состоянии следующим образом: 

export default class App extends React.Component {
  state = { tags: ['3121'], myTags: "3121" }; // This line

  render() {
    return (
      <View style={styles.container}>
        <Tags
          initialText=""
          textInputProps={{
            placeholder: 'Servicable Postcodes',
          }}
          initialTags={this.state.tags} // This line
          onChangeTags={tags => this.changeTags(tags)}
          inputStyle={{ backgroundColor: 'white', borderBottomWidth: 1 }}
          renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
            <TouchableOpacity key={`${tag}-${index}`} onPress={onPress}>
              <Text style={styles.tagStyle}>{tag}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }

  changeTags(newtags) { // This function
    this.setState({ tags: newtags, myTags: newtags.toString() }, () =>
      console.log(this.state)
    );
  }
}

Это означает для каждого рендера (который будет происходить каждый раз, когда тег добавляется при вызове). setState), компонент Tag отобразит теги, которые вы сохранили в состоянии.

Я также включил в ваш штат еще одного члена по имени myTags, который отображает строковое значение ваших тегов, так как кажется, что это было необходимо из вашего предыдущего кода.

Здесь - рабочая закуска

...