如何编辑配方对象数组中的配方对象

时间:2018-05-06 04:13:07

标签: javascript reactjs

我正在使用React创建一个食谱盒项目,为了编辑现有的食谱,我尝试了这段代码,this.state.recipe目前是一个食谱对象数组:

editRecipe = (recipe) => {
  this.state.recipe.find(obj => obj.name === recipe.name).name = recipe.name;
  this.state.recipe.find(obj => obj.name === recipe.name).ingredients = recipe.ingredients;
}

并将此方法作为道具传递给<EditRecipe edit={this.editRecipe} />。 但是,当我激活该组件中的方法而不是调用编辑道具时,会出现一条错误消息:“this.state.recipe.find(...)is undefined”

还有其他方法可以编辑食谱吗?

以下是我收到的enter image description here

错误消息

谢谢。

4 个答案:

答案 0 :(得分:1)

箭头功能没有自己的this

来自MDN

  

箭头函数表达式的语法短于函数表达式,并且没有自己的thisargumentssupernew.target。这些函数表达式最适合非方法函数,不能用作构造函数。

不确定,但您可以尝试常规功能:

editRecipe = function(recipe){
  this.state.recipe.find(obj => obj.name === recipe.name).name = recipe.name;
  this.state.recipe.find(obj => obj.name === recipe.name).ingredients = 
  recipe.ingredients;
}

答案 1 :(得分:0)

它应该具有this可用于EditRecipe组件,因此更改您将该功能作为道具传递的方式

<EditRecipe edit={this.editRecipe.bind(this)} />

此外,您应该将功能更改为,

editRecipe = function(recipe){
  let selectedObj;
  selectedObj = this.state.recipe.find(obj => obj.name === recipe.name)
  if(selectedObj){
    selectedObj.name = recipe.name;
    selectedObj.ingredients =recipe.ingredients;
  }
}

答案 2 :(得分:0)

您需要使用private static boolean taskStarted = false; private static HashMap<UUID, Long> map = new HashMap<UUID, Long>(); @EventHandler public void onJoin(PlayerJoinEvent event) { map.put(event.getPlayer().getUniqueId(), Calendar.getInstance().getTime().getTime()); } @EventHandler public void onQuit(PlayerQuitEvent event) { map.remove(event.getPlayer().getUniqueId()); } @SuppressWarnings("deprecation") public static void startPowerTask() { if(taskStarted) return; taskStarted = true; Bukkit.getScheduler().scheduleSyncRepeatingTask(ServerCore.getPlugin(), new BukkitRunnable() { @Override public void run() { for(UUID uuid : map.keySet()) { long time = map.get(uuid); if(time == ???) Utils.sendMessage(uuid, "It's been 15 minutes"); } } }, 20, 20); } findObject assign数组内的项目。

我做了一个示例,其中包含代码旁边的注释说明

&#13;
&#13;
edit/update
&#13;
const JSON = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
  },

]

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      data: JSON,
    };
  }
  
edit = () =>{
  const newData = {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "New@email.com",//changing email address
  }
this.setState(prevState=>{
  const findItem = prevState.data.find(row => row.username === 'Samantha'); // find the item that you want to edit/update it
  return Object.assign(findItem, newData) //update the data
})

}
  render() {

    return (
      <div className="App">
        {this.state.data.map(row=>
        <li key={row.id}>{row.name} : {row.email}</li>
        )}
        <button onClick={this.edit}>Edit Clementine Bauch Email</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
&#13;
&#13;
&#13;

在您的代码中,找到项目后,您需要使用对象分配将<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div>状态设置为新数据。

recipe

答案 3 :(得分:0)

您的代码存在一些问题,因此我将逐一分解。

  • def sort5(a,b,c,d,e): if a > b: # a > b if c > d: # a > b ; c > d if a > c: # a > c > d ; a > b; 15 returns if e > c: if e > a: # e > a > c > d; a > b if b > d: if b > c: return [e, a, b, c, d] else: return [e, a, c, b, d] else: return [e, a, c, d, b] else: # a > e > c > d; a > b if b > c: if b > e: return [a, b, e, c, d] else: return [a, e, b, c, d] else: if b > d: return [a, e, c, b, d] else: return [a, e, c, d, b] else: if e > d: # a > c > e > d; a > b if b > e: if b > c: return [a, b, c, e, d] else: return [a, c, b, e, d] else: if b > d: return [a, c, e, b, d] else: return [a, c, e, d, b] else: # a > c > d > e ; a > b if b > d: if b > c: return [a, b, c, d, e] else: return [a, c, b, d, e] else: if b > e: return [a, c, d, b, e] else: return [a, c, d, e, b] else: # c > a > b ; c > d; 15 returns if e > a: if e > c: # e > c > a > b; c > d if d > b: if d > a: return [e, c, d, a, b] else: return [e, c, a, d, b] else: return [e, c, a, b, d] else: # c > e > a > b; c > d if d > a: if d > e: return [c, d, e, a, b] else: return [c, e, d, a, b] else: if d > b: return [c, e, a, d, b] else: return [c, e, a, b, d] else: if e > b: # c > a > e > b; c > d if d > e: if d > a: return [c, d, a, e, b] else: return [c, a, d, e, b] else: if d > b: return [c, a, e, d, b] else: return [c, a, e, b, d] else: # c > a > b > e ; c > d if d > b: if d > a: return [c, d, a, b, e] else: return [c, a, d, b, e] else: if d > e: return [c, a, b, d, e] else: return [c, a, b, e, d] else: # a > b ; d > c if a > d: # a > d > c ; a > b; 15 returns if e > d: if e > a: # e > a > d > c; a > b if b > c: if b > d: return [e, a, b, d, c] else: return [e, a, d, b, c] else: return [e, a, d, c, b] else: # a > e > d > c; a > b if b > d: if b > e: return [a, b, e, d, c] else: return [a, e, b, d, c] else: if b > c: return [a, e, d, b, c] else: return [a, e, d, c, b] else: if e > c: # a > d > e > c; a > b if b > e: if b > d: return [a, b, d, e, c] else: return [a, d, b, e, c] else: if b > c: return [a, d, e, b, c] else: return [a, d, e, c, b] else: # a > d > c > e ; a > b if b > c: if b > d: return [a, b, d, c, e] else: return [a, d, b, c, e] else: if b > e: return [a, d, c, b, e] else: return [a, d, c, e, b] else: # d > a > b ; d > c; 15 returns if e > a: if e > d: # e > d > a > b; d > c if c > b: if c > a: return [e, d, c, a, b] else: return [e, d, a, c, b] else: return [e, d, a, b, c] else: # d > e > a > b; d > c if c > a: if c > e: return [d, c, e, a, b] else: return [d, e, c, a, b] else: if c > b: return [d, e, a, c, b] else: return [d, e, a, b, c] else: if e > b: # d > a > e > b; d > c if c > e: if c > a: return [d, c, a, e, b] else: return [d, a, c, e, b] else: if c > b: return [d, a, e, c, b] else: return [d, a, e, b, c] else: # d > a > b > e ; d > c if c > b: if c > a: return [d, c, a, b, e] else: return [d, a, c, b, e] else: if c > e: return [d, a, b, c, e] else: return [d, a, b, e, c] else: # b > a if c > d: # b > a ; c > d if b > c: # b > c > d ; b > a; 15 returns if e > c: if e > b: # e > b > c > d; b > a if a > d: if a > c: return [e, b, a, c, d] else: return [e, b, c, a, d] else: return [e, b, c, d, a] else: # b > e > c > d; b > a if a > c: if a > e: return [b, a, e, c, d] else: return [b, e, a, c, d] else: if a > d: return [b, e, c, a, d] else: return [b, e, c, d, a] else: if e > d: # b > c > e > d; b > a if a > e: if a > c: return [b, a, c, e, d] else: return [b, c, a, e, d] else: if a > d: return [b, c, e, a, d] else: return [b, c, e, d, a] else: # b > c > d > e ; b > a if a > d: if a > c: return [b, a, c, d, e] else: return [b, c, a, d, e] else: if a > e: return [b, c, d, a, e] else: return [b, c, d, e, a] else: # c > b > a ; c > d; 15 returns if e > b: if e > c: # e > c > b > a; c > d if d > a: if d > b: return [e, c, d, b, a] else: return [e, c, b, d, a] else: return [e, c, b, a, d] else: # c > e > b > a; c > d if d > b: if d > e: return [c, d, e, b, a] else: return [c, e, d, b, a] else: if d > a: return [c, e, b, d, a] else: return [c, e, b, a, d] else: if e > a: # c > b > e > a; c > d if d > e: if d > b: return [c, d, b, e, a] else: return [c, b, d, e, a] else: if d > a: return [c, b, e, d, a] else: return [c, b, e, a, d] else: # c > b > a > e ; c > d if d > a: if d > b: return [c, d, b, a, e] else: return [c, b, d, a, e] else: if d > e: return [c, b, a, d, e] else: return [c, b, a, e, d] else: # b > a ; d > c if b > d: # b > d > c ; b > a; 15 returns if e > d: if e > b: # e > b > d > c; b > a if a > c: if a > d: return [e, b, a, d, c] else: return [e, b, d, a, c] else: return [e, b, d, c, a] else: # b > e > d > c; b > a if a > d: if a > e: return [b, a, e, d, c] else: return [b, e, a, d, c] else: if a > c: return [b, e, d, a, c] else: return [b, e, d, c, a] else: if e > c: # b > d > e > c; b > a if a > e: if a > d: return [b, a, d, e, c] else: return [b, d, a, e, c] else: if a > c: return [b, d, e, a, c] else: return [b, d, e, c, a] else: # b > d > c > e ; b > a if a > c: if a > d: return [b, a, d, c, e] else: return [b, d, a, c, e] else: if a > e: return [b, d, c, a, e] else: return [b, d, c, e, a] else: # d > b > a ; d > c; 15 returns if e > b: if e > d: # e > d > b > a; d > c if c > a: if c > b: return [e, d, c, b, a] else: return [e, d, b, c, a] else: return [e, d, b, a, c] else: # d > e > b > a; d > c if c > b: if c > e: return [d, c, e, b, a] else: return [d, e, c, b, a] else: if c > a: return [d, e, b, c, a] else: return [d, e, b, a, c] else: if e > a: # d > b > e > a; d > c if c > e: if c > b: return [d, c, b, e, a] else: return [d, b, c, e, a] else: if c > a: return [d, b, e, c, a] else: return [d, b, e, a, c] else: # d > b > a > e ; d > c if c > a: if c > b: return [d, c, b, a, e] else: return [d, b, c, a, e] else: if c > e: return [d, b, a, c, e] else: return [d, b, a, e, c] :我认为你已经通过绑定来解决问题了。

  • this.state is undefined:您赞成食谱是一个对象数组。首先,您应该再次检查this.state.recipe.find() is undefined数据的来源,以及它是否已初始化为数组。其次,检查您的浏览器。 recipe is not supported by Internet Explore因此需要更改您的测试浏览器或使用Array.find替代解决方案。

  • Array.find不安全,因为您假设您始终可以在列表中找到配方对象。如果Array.find没有找到任何内容,您可能会收到错误this.state.recipe.find(obj => obj.name === recipe.name).name = recipe.name;