Question

我创建了相同的组件（食谱）或“屏幕”两次，发送了不同的属性。

observer> test
observer: [["G1" 0] ["G2" 0] ["G3" 0]]
observer: [["G1" 10] ["G2" "hello"] ["G3" nobody]]

属性功能如下。只有状态会改变。

<Recipes setRecipes = {this.setRecipes} id="1" />
<Quantity setQuantity = {this.setQuantity} />
<Recipes setRecipes = {this.setRecipes2} id="2" />
<Quantity setQuantity = {this.setQuantity} />

在名为 Recipes 的mty组件中，我以随机的方式获取了本地数据库（我使用pouchdb），食谱和产品。

setRecipes = (recipe) => {
    this.setState({recipe:recipe})

  }

  setRecipes2 = (recipe2) => {
    this.setState({recipe2:recipe2})

  }

但是第二个屏幕配方被渲染两次。

如您所见，内容已替换。

Answer 1

我认为这可能与您有关g我认为这是一个全球性的问题吗？

尝试在类成员内部进行访问的更好方法是在类中使用词汇箭头函数，如下所示：

getRecipes = () => {
  // implementation   
}

或按如下所示在构造函数中将您的类成员绑定到此

constructor(props) {
  super(props);
  gThis = this;
  this.state = {
      id: this.props.id,
      recipeID: null,
      options: [ ],
  };

  this.getRecipes = this.getRecipes.bind(this);
  this.defineRecipe = this.defineRecipe.bind(this);
}

在另一个节点上，据我所知，您已经在Babel上转译了ES6代码。我强烈建议您使用诸如地图或forEach之类的es6变体替换您的for循环

const options = recipes.map(recipe => {
  const { _id: id, name } = recipe;
  data.push({
    id,
    name,
    recipe,
  });
});

this.setState({ options });

重复的异步组件两次呈现了最后一个

1 个答案: