Question

在我的组件中编辑现有用户数据。每个用户数据集都有很多属性。可以设置对象的值，如下例所示。或者怎么会正确？

  getInitialState() {
    return {
      user: {age: 0, id: 0, weight: 0, size: 0, ...},
    };
  },

  componentWillReceiveProps: function (nextProps) {
    this.setState({
      user: nextProps.user
    });
  },

  editUserAge(age) {
    this.state.user.age = age;

    this.setState({
      user: this.state.user
    });
  }

Answer 1

正确的方法是避免像这样直接改变状态

editUserAge(age) {
    let user = {...this.state.user};
    user.age = age;

    this.setState({ user });
  }

Answer 2

当您要设置的值与州的某个值相关时，您可以使用@FXML public void pathButtonClicked(ActionEvent actionEvent) { LOG.info("Image Path button clicked"); FileChooser chooser = new FileChooser(); chooser.setTitle("Select Image File"); chooser.getExtensionFilters().addAll( new FileChooser.ExtensionFilter("Image Files", "*.png", "*.jpg", "*.jpeg")); File file = chooser.showOpenDialog(null); if(file != null){ LOG.info("Got file " + file); // String filePath = file.getAbsolutePath().toString(); try { String imagePath = file.toURI().toURL().toString(); Image image = new Image(imagePath, 500,500,true,true,true); LOG.info("Image created " + image); } catch (MalformedURLException e) { e.printStackTrace(); } }else{ LOG.info("File not found!"); Alert alert = new Alert(Alert.AlertType.INFORMATION); alert.setTitle("Information Dialog"); alert.setHeaderText("Please Select a File"); alert.showAndWait(); }的功能版本。这样，如果方法中间的状态发生变化（因为setState是异步的，它可以随时因任何其他方法而发生）您当前的更改不会受到影响。您还需要避免改变以前的状态值。您可以使用Object.assign(..)。

示例

setState

直接设置状态对象并调用setState

2 个答案: