Reactjs 项目更改时不重新呈现本机节列表

我的项目中有一个分区列表。如果项目发生更改，则不会重新渲染。 我的代码：

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>
);
};
}

类测试扩展了React.Component{
开始=错误；
causeData=[]；
炫耀=虚假；
项目=[]；
_开始=（）=>{
const{ws}=this.props；
this.showLess=false；
if（ws.causes.length）{
此.causeData={
标题：语言。原因，
关键：“原因”，
数据：[]
};
forEach（原因=>{
设causedeails={
键：“原因”+原因id，
姓名：“，
值：cause.name，
sortIndex:cause.sortIndex，
进步：事业。进步
};
this.causeData.data.push（causedtails）；
如果（this.causeData.data.length>4）{
this.causeData.data=this.causeData.data.slice（0,4）；
}
});
this.items.push（this.causeData）；
log（“causeData”，this.causeData）；
}  
}
}
_renderItem=（{item}）=>{
返回(
{`${item.name}${
项目价值
}`}
);
};
_renderSectionHeader=（{section}）=>{
const{ws}=this.props；
const showMore=ws.causes.length>0&！this.showLess；
返回(
{section.title}
{showMore&&(
)}
);
};
_keyExtractor=（项，索引）=>item.key；
_后因回答=（）=>{
const{stepDone，ws}=this.props；
this.causeData.data={…ws.causes}；
stepDone（“showmore”）；
this.showLess=true；
};
渲染=（）=>{
如果（！this.started）{
this.started=true；
这个；
}
返回(
);
};
}

---

在我的分区列表中，分区标题包含一个名为showMore的按钮。在初始渲染时，它将仅显示5个项目，而单击“显示更多”时，它将显示所有列表。这是我的功能。但单击showMore按钮时，它不会显示整个列表，只显示5项，这意味着sectionList不会重新渲染。如何解决这个问题？我是个新来的本地人。你知道我错过了什么吗？任何帮助都将不胜感激

保持

项目

和

无显示

处于一种状态，并在按下按钮后调用

设置状态

。它将重新启动

部分列表

。另外，如果您想用显示的列表显示多个项目，则需要将

showLess

移动到item元素，以便每个项目都知道如何显示它。

您只需使用state重新渲染屏幕即可

this.setState({})

---

您的

分区列表

应始终从

状态

读取。。。因为它应该是你的真理的唯一来源

以下是如何：

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 });
    }
  }
}

---

实际上，我并没有在我的项目中使用setState和redux。“ws.cause”来自redux州。因此，如何解决这个问题您可以调用

this.forceUpdate（）

，但这不是一个好方法。您需要直接从道具将更改的项目作为

sections

或

extraData

传递到

SectionList

。在您的情况下，您正在更改项目，但由于

SectionList

的

sections

值不是来自

this.state

或

this.props，因此不应更新
SectionList