Question

我有一个对象数组。

我想在组件中显示这些对象，并想创建一个函数，当我单击按钮时将seen: 0更改为seen: 1。

var historyNotif = [ 
   {id: 66, seen: 0, tourist_full_name: "Khouloud Ben Abddallah"},
   {id: 102, seen: 0, tourist_full_name: "Harry Paz Galvez"},
   {id: 103, seen: 0, tourist_full_name: "Harry Paz Galvez"},
]

我尝试了此方法，但不起作用：

isSeen() {
  this.setState(() => ({
    historyNotif: {
      ...this.state.historyNotif,
      seen: 1
    }
  }));
}

该怎么做？

Answer 1

您可以将通知保持在组件状态，并通过渲染中的通知进行映射，可以生成一些html，并在那里触发事件以更新可见值。

import React, { Component } from "react";

class App extends Component {
  state = {
    notifications: [
      { id: 66, seen: 0, tourist_full_name: "Khouloud Ben Abddallah" },
      { id: 102, seen: 0, tourist_full_name: "Harry Paz Galvez" },
      { id: 103, seen: 0, tourist_full_name: "Harry Paz Galvez" }
    ]
  };

  handleClick = id => {
    console.log(id);
    const updatedItems = this.state.notifications.map(item => {
      if (item.id === id) {
        return { ...item, seen: 1 };
      }
      return item;
    });
    this.setState({
      notifications: updatedItems
    });
  };

  render() {
    return (
      <div>
        {this.state.notifications.map(item => {
          return (
            <button key={item.id} onClick={() => this.handleClick(item.id)}>
              {item.tourist_full_name}-{item.seen ? "SEEN" : "NOT SEEN"}>
            </button>
          );
        })}
      </div>
    );
  }
}

export default App;

Codesandbox

Answer 2

class SampleApi:
    @staticmethod
    def on_get(req, resp):
        return modules.get_response(resp)

    def on_post(self, req, resp):
        """Handles POST requests"""
        modules.common_function(req, resp, function_name, custom=True)

调用此函数并将id作为参数传递，该参数已存在

如果要更改所有对象的可见状态。你可以喜欢

 isSeen=(id)=>{
    let {historyNotif}=this.state
    historyNotif.map(each=>each.id===id?each.seen=1:null)
    this.setState({historyNotif})
}

如何在对象数组中设置状态

2 个答案: