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

Question

我正在寻找一种方法来隐藏一个 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>)
    }
);

数据是一个 data.json 文件，其中填充了数组中的许多此类对象

{
   "uuid": "dsfgkj24-sfg34-1r134ef"
   "text": "Some Text"
}

编辑：抱歉问题问得不好，我是新手。

Answer 1

未经测试，只是一个蓝图......这是你想做的吗？ 是的，我没有隐藏，我删除了，但再次，只是一个关于如何单独隐藏按钮的想法，通过保持关注哪些按钮的状态。

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>
        ))
    };
}

版本

const hideMe = id => hiddenSet([...hidden, id]);

这只是一种花哨的写法：

    function hideMe(id) {
       const newArray = hidden.concat(id);
       hiddenSet(newArray);
    }

Answer 2

我建议使用 Set、Map 或对象来跟踪您希望在单击按钮时隐藏的元素 ID。这提供了O(1) 查找需要隐藏的内容。请务必呈现您的 实际 文本而不是字符串文字，即 <p>{object.text}</p> 与 <p>object.text</p>。

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>
    );
  }
}