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

Question

我在 create-react-native-app 中动态创建组件。使用 expo 应用程序在开发模式下使用 npm start 进行测试并连接到 Android 手机，一切正常。

如果我将其切换到生产模式，或尝试将 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

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

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

let knobs = this.state.knobs;

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

要设置与当前状态值相关的新状态值，您可以使用 functional setState syntax和 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
  });
}