javascript - unshift 方法不断将新对象推送到选择器中

Question

所以我在React Native中有一个选择器，该项目基于api，并且api包含像这样的对象数组

[{"code": "N", "description": "正常", "id": 1, "note": null, "tolerance": 600}, {"code": "V ", "描述": "变量", "id": 2, "注释": null, "容差": null}, {"code": "F", "描述": "灵活", "id": 3、“note”:null，“tolerance”:null}]

我想为选择器添加某种占位符，所以我使用了 unshift 方法，但是当我单击选择器中的某个项目时，unshift 不断将新项目推送到数组内

render(){
let scheduleTypes = this.props.schedules;
    scheduleTypes.unshift({"description":"Schedule Type", "id": "0"});
  return(
    <PickerWrapper items={scheduleTypes} onSelect={(item) => this.setState({ type_absen: item })}/>
  )
}

我的问题是，这种情况是如何持续插入的以及如何阻止它？

Answer 1

render(){
let scheduleTypes = this.props.schedules;
scheduleTypes.unshift({"description":"Schedule Type", "id": "0"}); // <= this needs to be removed from render
  return(
    <PickerWrapper items={scheduleTypes} onSelect={(item) => this.setState({ type_absen: item })}/>
  )
}

那么，让我解释一下你的代码:

1. 您将一个项目添加到数组中。好的!
2. 当选择一个项目时，您会重新渲染组件。好的!
3. 您的组件再次调用渲染，然后，您的数组中就有了附加项。

我很快就会做到，这就是 React Native (RN) 组件分别运行的方式:

1. construct():这将首先构造您的组件。
2. componentWillMount():您可以在此处放置一些代码，这些代码将在组件显示(渲染)之前进行处理。
3. render():您想要在该组件中显示的所有内容。
4. componentDidMount():出现后执行一些操作。

当您调用 setState() 时，它将重新运行您的 render() 函数。由于您将 unshift() 放入 render() 中，因此它将再次运行 unshift() 。这就是问题所在。

要解决此问题，您可以将 unshift() 放入 componentWillMount() 或 construct() 中。有关更多详细信息，请首先阅读并研究 React Native 生命周期。 ReactJS State and Lifecycle (此链接来自ReactJS的文档，但大体相同)