项目更改时反应本机部分列表不重新渲染

Posted 2023-02-16

【中文标题】项目更改时反应本机部分列表不重新渲染

【英文标题】：React native section list not re-rendering when item changes

【发布时间】：2019-08-27 02:25:58

【问题描述】：

我的 react native 项目中有一个 sectionList。如果项目更改，它不会重新渲染。 我的代码：

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 它应该显示所有列表。这是我的功能。但是在单击 showMore 按钮时，它不会显示整个列表，仅显示 5 个项目，这意味着 sectionList 不会重新渲染。如何解决这个问题？我是新来的反应本地人。知道我错过了什么吗？任何帮助将不胜感激！

【参考方案1】：

保持items 和showLess 处于一种状态，并在按下按钮调用setState 后使用新值。它将重新渲染SectionList。此外，如果您想通过显示列表显示多个项目，则需要将 showLess 移动到项目元素，以便每个项目都知道如何显示它。

【讨论】：

实际上并没有使用 setState，而是在我的项目中使用 redux。 “ws.cause”来自 redux 状态。那么如何解决这个问题

您可以致电this.forceUpdate()，但这不是一个好方法。您需要将更改的项目直接从道具传递给SectionList 作为sections 或extraData。在您的情况下，您正在更改项目，但由于 SectionList 的 sections 值不是来自 this.state 或 this.props 它不应该更新 SectionList

【参考方案2】：

你只需要使用 state 重新渲染你的屏幕就可以了

this.setState()

【讨论】：

如果数据来自 prop 怎么办？

【参考方案3】：

您的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 );