在动态生成的组件中创建 React Native 应用程序，开发和生产差异

Question

我在 create-react-native-app 中动态创建组件。使用 expo 应用程序在开发模式下使用 npm start 进行测试并连接 android phone.

一切正常

如果我将其切换到生产模式，或尝试将 apk 构建为独立应用程序，则不会在按下按钮时创建对象。

这是我第一个使用 React Native 的项目，我不知道如何调试它。我也一直无法找到有关这两种模式之间可能导致这种情况的差异的任何信息。

这里是相关代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.updateState = this.updateState.bind(this);
    this.state = {
      knobs: [],
      key: 1
    }
  }

  add = () => {
    let key = this.state.key + 1
    let knob = (<Object key={key} updateState={this.updateState}/>);
    let knobs = this.state.knobs;
    knobs.push(knob);
    this.setState({knobs: knobs, key: key})
  }

  render = () => {
    return ([<View>
      {this.state.knobs}
      <Button onPress={() => this.add()} title='add thing'/>
    </View>
      ]);
  }
}

Answer 1

我不确定是什么原因导致了这个问题，因为我们没有任何类型的错误消息，但下面的代码片段可能会有所帮助。

当您像下面这样分配一个变量时；

let knobs = this.state.knobs;

您不是在创建新变量，而是在创建对原始属性的引用。正因为如此，你改变了状态。这可能会导致问题。

要设置与当前状态值相关的新状态值，您可以使用 functional setState syntax and destructuring assignment。它更易于使用，也更易于阅读。

add = () => {
  this.setState((prevState) => {
    const { knobs, key } = prevState; // deconstruct array and key from state
    const newKnob = (<Object key={(key + 1)} updateState={this.updateState}/>);
    knobs.push(newKnob); // push new item to array
    return { knobs, key: (key + 1) } //return new state values
  });
}

Answer 2

哦，所以最后我重写了整个位。

将要创建的对象移动到渲染函数中。

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      things: []
    }
    this.key = 0;
  }

  add = () => {
    let addThing = { key: this.key }
    this.setState({ things: [ ...this.state.things, addThing ] })
    this.key = this.key + 1;
  }

  render() {
    let newThings = this.state.things.map((key) => {
      return (
        <Text key={key}>New Thing.</Text>
      );
    });
    return (<View style={styles.container}>
      {newThings}
      <Button onPress={() => this.add()} title='add thing'/>
    </View>);
  }
}

这在生产模式和应用程序中的功能符合预期；）

在动态生成的组件中创建 React Native 应用程序，开发和生产差异

Create react native app, development and production differences in dynamically generated components

android

react-native

create-react-native-app