Question

因此，我是React的新手，正在尝试创建一个基本的日程表应用程序。我有四个文件：“ App.js”，“ AllEvents.js”，“ Event.js”和“ NavBar.js”

我的App.js非常简单，我只包含相关部分

const App = () => {
  const [eventFilters, setEventFilters] = useState([]);
  const [allEvents, setAllEvents] = useState([]);

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

  const getAllEvents = async () => {
    const response = await fetch(URL);
    const data = await response.json();

    setAllEvents(data.events);
  };

  return (
    <div className="App">
      <NavBar eventFilters={eventFilters} setEventFilters={setEventFilters}/>
      <AllEvents allEvents={allEvents} eventFilters={eventFilters}/>
    </div>
  )
}

在AllEvents.js中，我实际上渲染了从App.js中的getAllEvents（）获得的事件

import React, { useState, useEffect } from 'react';
import Event from './Event';

const AllEvents = ({allEvents, eventFilters}) => {
  const [filteredEvents, setFilteredEvents] = useState([]);

  const getFilteredEvents = () => {
    setFilteredEvents(allEvents.filter(event => eventFilters.includes(event.eventType)));
  }

  useEffect(() => {
      getFilteredEvents();
  }, [eventFilters.length]);

  return(
    <div>
        {filteredEvents.map((event) => (
            <Event 
              key={event.id}
              title={event.name}
              description={event.description}
              type={event.eventType}
            />
        ))}
    </div>
  );
}

在NavBar.js中，我根据按下的按钮设置了eventFilters

const navBar = ( {eventFilters, setEventFilters} ) => {
  const eventFilterHandler = (e) => {
    var passedFilter = e.target.value;
    var arrayContainsFilter = false;

    for(var i = 0; i < eventFilters.length; i++){
      if(eventFilters[i] == passedFilter){
        eventFilters.splice(i, 1);
        setEventFilters(eventFilters);
        arrayContainsFilter = true;
      }
    }

    if(!arrayContainsFilter){
      setEventFilters(eventFilters.concat(passedFilter));
    }
    console.log(eventFilters);
  };

  return(
    <div>
      
      <div onClick={eventFilterHandler}>
        <button value="ALL"> All </button>
        <button value="WORKSHOP"> Workshop </button>
        <button value="MINIEVENT"> Minievent </button>
        <button value="SPEAKER"> Speaker </button>
        <button value="MEAL"> Meal </button>
        <button value="OTHER"> Other </button>
      </div>

    </div>
  );
}

当我通过单击按钮将值添加到eventFilters时，AllEvents.js中的UseEffect会运行并重新呈现页面。但是，当我删除值时，useEffect不会运行，并且页面也不会重新呈现。有人知道为什么吗？

Answer 1

问题是：

for(var i = 0; i < eventFilters.length; i++){
  if(eventFilters[i] == passedFilter){
    eventFilters.splice(i, 1);
    setEventFilters(eventFilters);
    arrayContainsFilter = true;
  }
}

if(!arrayContainsFilter){
  setEventFilters(eventFilters.concat(passedFilter));
}

在循环中，您要对现有状态进行变异（在React中永远不要这样做），并将变异的状态传递给set状态函数。由于旧状态是===到新状态，因此没有重新渲染。

从不改变React状态。而是创建一个副本。在这里，您可以使用filter：

if (eventFilters.includes(passedFilter)) {
  setEventFilters(
    eventFilters.filter(item => item !== passedFilter)
  );
} else {
  setEventFilters(eventFilters.concat(passedFilter));
}

Answer 2

据我所知，您想在数据更改后重新呈现组件。但是它仅在添加数据时才更改，而不是在删除时才更改。这可能是由于useEffect您仅当您正在运行时才运行它获取数据。以前

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

现在

 useEffect(() => {
    getAllEvents();
  }, [allEvents]);

更改数据时运行useEffect。如果已删除或添加数据

useEffect仅在将值添加到数组时运行，而在删除值时不运行

2 个答案: