Реагировать на собственный список разделов без повторного рендеринга при изменении элемента

Question

У меня есть раздел List в моем собственном проекте.он не перерисовывается, если элемент изменяется.Мой код:

test.js

class Test extends React.Component {
started = false;
causeData=[];
showLess=false;
items = [];

_start = () => {
    const { ws } = this.props;

    this.showLess = false;
    if (ws.causes.length) {
  this.causeData = {
    title: Language.causes,
    key: "cause",
    data: []
  };

  ws.causes.forEach(cause => {
    let causeDetails = {
      key: "cause_" + cause.id,
      name: "",
      value: cause.name,
      sortIndex: cause.sortIndex,
      progress: cause.progress
    };
    this.causeData.data.push(causeDetails);

    if (this.causeData.data.length > 4) {
      this.causeData.data = this.causeData.data.slice(0, 4);
    }
  });
  this.items.push(this.causeData);
  console.log("causeData", this.causeData);
  }  
  }
  }

 _renderItem = ({ item }) => {
     return (
          <View>
          <Text key={item.key} style={styles.text}>{`${item.name}  ${
            item.value
          }`}</Text>
        </View>
  );
 };

_renderSectionHeader = ({ section }) => {
   const { ws } = this.props;
   const showMore = ws.causes.length > 0 && !this.showLess;

  return (
    <View style={styles.sectionHeader}>
      <Text key={section.key} style={styles.header}>
        {section.title}
      </Text>
      {showMore && (
        <Button
          onPress={this._afterCauseAnswered}
          title={Language.showMore}
          data={this.items}
          accessibilityLabel={Language.causeDoneAccessibility}
        />
      )}
      </View>
    );
    };

   _keyExtractor = (item, index) => item.key;

  _afterCauseAnswered = () => {

    const { stepDone, ws } = this.props;
    this.causeData.data = { ...ws.causes };

    stepDone("showMoreAnswered");
    this.showLess = true;
  };

  render = () => {
  if (!this.started) {
  this.started = true;
  this._start();
  }
  return (
  <View style={styles.container}>
    <SectionList
      sections={this.items}
      extraData={this.items}
      renderItem={this._renderItem}
      renderSectionHeader={this._renderSectionHeader}
      keyExtractor={this._keyExtractor}
    />
  </View>
);
};
}

в моем заголовке раздела списка разделов есть кнопка с именем showMore.При начальном рендеринге он будет отображать только 5 элементов, а при нажатии «Показать» он должен отображать весь список.Это моя функциональность.но при нажатии кнопки showMore не будет отображаться весь список, отображаются только 5 элементов, что означает, что sectionList не получает повторную визуализацию.Как решить это?Я новичок, чтобы реагировать на родных.Есть идеи, что мне не хватает?Любая помощь будет принята с благодарностью!

Answer 1

Сохраните items и showLess в состоянии и после нажатия кнопки вызова setState с новыми значениями. Это будет перерисовать SectionList. Кроме того, если вы хотите отобразить несколько элементов с отображаемым списком, вам нужно переместить showLess к элементу элемента, чтобы каждый элемент знал, как его отобразить.

Answer 2

Ваше SectionList всегда должно читаться из state ... как и должно быть единственным источником истины

и вот как:

class YourComponent extends React.Component {
  state = {
    items: [],
  };

  // This will be called after your action is executed,
  // and your component is about to receive a new set of causes...
  componentWillReceiveProps(nextProps) {
    const {
      ws: { causes: nextCauses },
    } = nextProps;
    if (newCauses) {
      // let items = ...
      // update yout items here
      this.setState({ items });
    }
  }
}

Answer 3

Вам просто нужно перерисовать ваш экран, используя состояние, и все готово

this.setState({})