Javascript 搜索字段在输入字段中1个字母后将我踢出

这是一种反应。我有一个搜索输入字段，但是在键入一个字母后，它使我远离输入字段，并再次呈现页面。搜索字段确实有效，它只是把我踢出去。我试着添加一个

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;

import React，{useState，useffect}来自“React”；
从“reactstrap”导入{Container，Row，Col，Input}；
从“/MeetingTable”导入MeetingTable；
从“/MeetingCreate”导入会议创建；
从“/MeetingEdit”导入会议编辑；
从“./helpers/environment”导入APIRL；
从“样式化组件”导入样式化；
导入“/MeetingMain.css”；
const MeetingMain=（道具）=>{
const Div=styled.Div`
背景色：#363136；
不透明度：0.8；
边界半径：5px；
填充顶部：10px；
左侧填充：10px；
`;
const[meetings，setMeetings]=useState（[]）；
常量[updateActive，setUpdateActive]=useState（false）；
const[meetingToUpdate，setMeetingToUpdate]=useState（{}）；
常量[searchField，setSearchField]=useState（“”）；
常量表样式={
显示：“flex”，
flexDirection:“列”，
辩护内容：“中心”，
对齐项目：“中心”，
最大宽度：“1175px”，
};
const fetchMeetings=（）=>{
获取（`${apirl}/meeting`{
方法：“获取”，
标题：新标题({
“内容类型”：“应用程序/json”，
授权：props.token，
}),
})
.然后（（res）=>res.json（））
。然后（（日志数据）=>{
setMeetings（logData.meetings）；
控制台.日志（日志数据.会议）；
});
};
const editUpdateMeeting=（会议）=>{
设置会议更新（会议）；
控制台日志（会议）；
};
const updateOn=（）=>{
setUpdateActive（true）；
};
常量updateOff=（）=>{
setUpdateActive（假）；
};
useffect（（）=>{
获取会议（）；
}, []);
const filteredMeetings=会议。过滤器（（会议）=>
meeting.day.toLowerCase（）.includes（searchField.toLowerCase（））
);
返回(
setSearchField（e.target.value）}
值={searchField}
/>
{updateActive(
) : (
)}
);
};
导出默认MeetingMain；

---

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

您应该将

Div

移到

MeetingMain

组件之外，如下所示

constdiv=styled.Div`
背景色：#363136；
不透明度：0.8；
边界半径：5px；
填充顶部：10px；
左侧填充：10px；
`;
const MeetingMain=（道具）=>{
...
}

查看此问题 在功能组件中定义一个样式化组件，这意味着每个渲染周期它都是一个新的组件。换言之，它是一个新的组件，在从

onChange

处理程序进行状态更新时被装载并呈现，而不是被重新请求

在渲染外部定义样式化组件非常重要 方法，否则将在每个渲染过程中重新创建它。 在render方法中定义样式化组件将阻碍 缓存并显著降低渲染速度，应该 避免

回忆：功能组件的整个主体是呈现“方法”

解决方案 在

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("");

---

谢谢，我不知道。成功了@当然，欢迎！如果您的问题得到解决，请接受答案，如果您觉得这些问题有帮助，请向上投票（如果您尚未投票），以表示感谢。干杯