试图只显示一种形式

如何解决试图只显示一种形式

我目前正在做一个 MERN 应用程序，但我有一个小问题......

我正在做的是创建一个应用程序，您可以在其中创建房间，在这些房间中您可以创建您一天要做的事情，它实际上就像一个 Todo 应用程序，但更复杂（我想给你一个简短的关于我的应用程序的背景，以便您了解更多）

问题是，我有一个按钮，当你点击那个按钮时，它会出现一个表单而不是按钮，但是，如果我有 2 个房间，两个房间都会显示表单，而我只需要一个房间（我点击的那个）来显示房间

让我向你展示我试图做的逻辑......

const Room = () => {
  const dispatch = usedispatch();

  const user = JSON.parse(localStorage.getItem("profile"));

  const [Todo,setTodo] = useState(false);
  const [showForm,setShowForm] = useState(false);

  // Asking For The Data

  const rooms = useSelector(state =>
    state.rooms.filter(
      r => r.name === user?.result?.name || r.creator === user?.result?._id
    )
  );

  const handleShow = id => {
    console.log(id);
    const truthy = rooms.find(identificator => identificator._id === id);
    console.log(truthy._id);
    if (truthy._id === id) {
      setShowForm(true);
    } else {
      setShowForm(false);
    }
  };

  if (user?.result) {
    return (
      <>
        {/* Todo Window */}

        {Todo && <Todo setTodo={setTodo} />}

        {/*  */}

        <MainBackground>
          <Container>
            {/* Showing The Rooms */}

            {rooms.map(room => {
              return (
                <Rooms key={room._id}>
                  <section>
                    <User>
                      <CreatedTime>
                        {user?.result?.name} <br />
                        <span>{moment(room.createdAt).fromNow()}</span>
                      </CreatedTime>
                      <span
                        style={{ cursor: "pointer",marginRight: "1rem" }}
                        onClick={() => setTodo(true)}
                      >
                        <OpenItUp />
                      </span>
                    </User>

                    <RoomStuff>
                      <h2>{room.room}</h2>
                    </RoomStuff>

                    {/* Buttons And The Form To Create Your Shit */}

                    <RoomsButtons>
                      {!showForm ? (
                        <>
                          <span>
                            <RoomsButtonEdit
                              onClick={() => handleShow(room._id)}
                            />
                          </span>
                          <span
                            onClick={() => dispatch(deletingRooms(room._id))}
                          >
                            <RoomsButtonDelete />
                          </span>
                        </>
                      ) : (
                        /* Form */

                        <FormTodo setShowForm={setShowForm} />
                      )}
                    </RoomsButtons>
                  </section>
                </Rooms>
              );
            })}

当您单击 RoomsButtonEdit 时，在 onclick 函数 (handleShow) 中，我正在传递房间的 id，然后将该 id 与实际房间进行比较，如果 id 匹配，则 setShowForm(true)（这意味着将出现表单而不是按钮），但如果不匹配，则表单无法出现

问题是，当我点击时，机器人表单出现...

这是房间的照片

请帮我解决这个问题，如果你能帮我解决这个问题，你太棒了！

感谢您的时间社区！

解决方法

在这里，您找到了属性 _id 等于 id

的房间

const truthy = rooms.find(identificator => identificator._id === id);

用你找到的这个房间（真实）你正在测试 truthy._id 是否等于 id 这总是正确的，因为这个 id 是你用来过滤房间数组的东西

if (truthy._id === id)