javascript - 搜索字段在输入 1 个字母后将我踢出输入字段

Question

这是在 React 中。我有一个搜索输入字段，但是在输入一个字母后，它使我无法进入输入字段并再次呈现页面。搜索栏确实有效，但它只是把我踢了出去。我尝试添加一个

onChange={(e) => setSearchField(e.target.value), function(e) {
  e.preventDefault();
}}

到输入字段，但它不起作用。这是我的整个文件:

import React, { useState, useEffect } from "react";
import { Container, Row, Col, Input } from "reactstrap";
import MeetingTable from "./MeetingTable";
import MeetingCreate from "./MeetingCreate";
import MeetingEdit from "./MeetingEdit";
import APIURL from "../helpers/environment";
import styled from "styled-components";
import "./MeetingMain.css";

const MeetingMain = (props) => {
  const Div = styled.div`
    background-color: #363136;
    opacity: 0.8;
    border-radius: 5px;
    padding-top: 10px;
    padding-left: 10px;
  `;

  const [meetings, setMeetings] = useState([]);
  const [updateActive, setUpdateActive] = useState(false);
  const [meetingToUpdate, setMeetingToUpdate] = useState({});
  const [searchField, setSearchField] = useState("");

  const tableStyle = {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    maxWidth: "1175px",
  };

  const fetchMeetings = () => {
    fetch(`${APIURL}/meeting`, {
      method: "GET",
      headers: new Headers({
        "Content-Type": "application/json",
        Authorization: props.token,
      }),
    })
      .then((res) => res.json())
      .then((logData) => {
        setMeetings(logData.meetings);
        console.log(logData.meetings);
      });
  };

  const editUpdateMeeting = (meeting) => {
    setMeetingToUpdate(meeting);
    console.log(meeting);
  };

  const updateOn = () => {
    setUpdateActive(true);
  };

  const updateOff = () => {
    setUpdateActive(false);
  };

  useEffect(() => {
    fetchMeetings();
  }, []);

  const filteredMeetings = meetings.filter((meeting) =>
    meeting.day.toLowerCase().includes(searchField.toLowerCase())
  );

  return (
    <Div>
      <Container style={tableStyle}>
        <Row>
          <Col md="12">
            <MeetingCreate fetchMeetings={fetchMeetings} token={props.token} />
          </Col>
          <Col md="12">
            <Input
              className="search-field"
              type="search"
              placeholder="Search Meetings"
              onChange={(e) => setSearchField(e.target.value)}
              value={searchField}
            />
            <MeetingTable
              meetings={filteredMeetings}
              editUpdateMeeting={editUpdateMeeting}
              updateOn={updateOn}
              fetchMeetings={fetchMeetings}
              token={props.token}
            />
          </Col>
          {updateActive ? (
            <MeetingEdit
              meetingToUpdate={meetingToUpdate}
              updateOff={updateOff}
              token={props.token}
              fetchMeetings={fetchMeetings}
            />
          ) : (
            <></>
          )}
        </Row>
      </Container>
    </Div>
  );
};

export default MeetingMain;

所以我有点不知道是什么原因造成的。任何帮助将不胜感激。

Answer 1

问题

您正在功能组件内部定义一个样式组件，这意味着每个渲染周期它都是一个新组件。换句话说，它是一个新组件，并且已安装和渲染，而不是在状态从 onChange 处理程序更新时重新渲染。

Define Styled Components outside of the render method

It is important to define your styled components outside of the rendermethod, otherwise it will be recreated on every single render pass.Defining a styled component within the render method will thwartcaching and drastically slow down rendering speed, and should beavoided.

记忆:功能组件的整个主体是渲染“方法”。

解决方案

在 MeetingMain 外部声明 Div 组件，使其成为稳定的组件引用。

const Div = styled.div`
  background-color: #363136;
  opacity: 0.8;
  border-radius: 5px;
  padding-top: 10px;
  padding-left: 10px;
`;

const MeetingMain = (props) => {
  const [meetings, setMeetings] = useState([]);
  const [updateActive, setUpdateActive] = useState(false);
  const [meetingToUpdate, setMeetingToUpdate] = useState({});
  const [searchField, setSearchField] = useState("");