Javascript 如何在React中的.map函数中隐藏特定元素？

我正在寻找一种方法来隐藏一个div一旦在它的按钮被点击，并继续显示所有其他div的

我尝试过使用setState方法，但是当使用onClick（）将其设置为false时，我的所有对象都会消失

class App extends React.PureComponent {

    state: {
        notHidden: false,       
    }

    constructor(props: any) {
        super(props);
        this.state = {search: '', notHidden: true};

        this.hideObject = this.hideObject.bind(this)
    }

    hideThisDiv() {
        this.setState({notHidden: false})
    }

    async componentDidMount() {
        this.setState({
            objects: await api.getObjects()
        });
    }

render = (objects: Object[]) => {
return ({Object.map((object) => 

        <div key={index} className='class'>             
            <button className='hide' type='button' onClick={() => hideThisDiv()}>Hide</button>
            <p>object.text</p>
        </div>}

render() {  
        const {objects} = this.state;

        return (<main>
            <h1>Objects List</h1>
            <header>
                <input type="search" onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            {objects ? this.render(objects) : null}
        </main>)
    }
);

---

编辑：很抱歉这个问题问得不好，我还没有反应过来。

没有测试，只是一个蓝图。。。这是你想做的吗？ 是的，我并没有隐藏，我删除了，但再一次，只是一个想法，关于如何可以隐藏按钮分开，保持在状态，哪些是相关的

function MagicList() {
    const [hidden, hiddenSet] = useState([]);
    const items = [{ id:1, text:'hello'}, { id:2, text:'from'}, { id:3, text:'the other sided'}]
    
    const hideMe = id => hiddenSet([...hidden, id]);

    return {
        items.filter( item => {
            return hidden.indexOf(item.id) !== -1;
        })
        .map( item => (
            <button key={item.id} onClick={hideMe.bind(this, item.id)}>{item.text}</button>
        ))
    };
}

---

我建议使用集合、映射或对象来跟踪您希望在单击按钮时隐藏的元素ID。这提供了

O（1）

查找需要隐藏的内容。请确保呈现的是实际文本而不是字符串文字，即

{object.text}

与

object.text

class MyComponent extends React.PureComponent {
  state = {
    hidden: {}, // <-- store ids to hide
    objects: [],
    search: "",
  };

  // Curried function to take id and return click handler function
  hideThisDiv = id => () => {
    this.setState(prevState => ({
      hidden: {
        ...prevState.hidden, // <-- copy existing hidden state
        [id]: id // <-- add new id
      }
    }));
  }

  ...

  render() {
    const { hidden, objects } = this.state;

    return (
      <main>
        
        ...

        {objects
           .filter((el) => !hidden[el.uuid]) // <-- check id if not hidden
           .map(({ uuid, text }) => (
              <div key={uuid}>
                <button
                  type="button"
                  onClick={this.hideThisDiv(uuid)} // <-- attach handler
                >
                  Hide
                </button>
                <p>{text}</p>
              </div>
          ))}
      </main>
    );
  }
}

类MyComponent扩展了React.PureComponent{
状态={
隐藏：{}，//（）=>{
this.setState（prevState=>({
隐藏的：{
…prevState.hidden，//请提供更多代码，而不仅仅是返回。我们需要查看您的“对象”以及如何使用UseState您需要为所有要“隐藏”的映射元素保留一个状态。然后，您可以有条件地呈现null（如果应该隐藏），或者先筛选状态，然后映射。或者，您可以将显示/隐藏状态抽象到管理其自身可见性的组件中。
（）=>hideThisDiv
无效。请提供一个代码示例。我不太确定您试图在那里执行的操作，因此如果单击按钮，按钮将消失，则为是。但是，由于我是新手，我无法100%确定hideMe函数如何工作。感谢您的回复，似乎这种过滤方式无法工作，因为UUID可以'不能用作索引。此外，hideDiv函数'id'变量会隐式抛出一个无类型错误，有什么方法可以处理此错误？@1994年3月，为什么要使用guid作为索引？您能解释一下您的意思吗？您可能不想将数组索引与正在呈现的任何内容关联，因为这样可能会导致用户界面更新问题正在从正在映射的数组中删除元素。您在使用
hideThisDiv
时看到的错误是什么？我在运行的沙盒中没有看到任何此类错误。您是否注意到它是一个常用函数？运行此行时，“！hidden[el.uuid]”'我得到一个错误el.uuid不能用作输入类型，我在HideThisDiv中看到的错误是，当我声明函数抛出一个“参数”id时，第一个id隐式地具有一个“any”类型。什么是curried函数？@1994年3月听起来像是在使用typescript（或某种类型的JS）。我不知道在这种模糊的上下文中，
el.uuid
不能用作输入类型的错误是什么意思。对于
hideThisDiv
，id类型将是字符串。是一种将包含多个参数的函数转换为包含单个参数的函数序列的方法。
onClick
回调接收一个事件对象currying允许我们以这样一种方式编写处理程序，即不需要匿名函数来传递我们关心的参数uuid。是的，这确实是在typescript中。我们已经处理这个问题好几个小时了。。。。
    function hideMe(id) {
       const newArray = hidden.concat(id);
       hiddenSet(newArray);
    }

class MyComponent extends React.PureComponent {
  state = {
    hidden: {}, // <-- store ids to hide
    objects: [],
    search: "",
  };

  // Curried function to take id and return click handler function
  hideThisDiv = id => () => {
    this.setState(prevState => ({
      hidden: {
        ...prevState.hidden, // <-- copy existing hidden state
        [id]: id // <-- add new id
      }
    }));
  }

  ...

  render() {
    const { hidden, objects } = this.state;

    return (
      <main>
        
        ...

        {objects
           .filter((el) => !hidden[el.uuid]) // <-- check id if not hidden
           .map(({ uuid, text }) => (
              <div key={uuid}>
                <button
                  type="button"
                  onClick={this.hideThisDiv(uuid)} // <-- attach handler
                >
                  Hide
                </button>
                <p>{text}</p>
              </div>
          ))}
      </main>
    );
  }
}