渲染不同的组件（`Navbar`）时无法更新组件（`Layout`）

Question

当我在输入上写入以生成对 API 的调用时，我不断收到以下错误

警告：渲染不同组件 (Layout) 时无法更新组件 (Navbar)。要在 Navbar 中找到错误的 setState() 调用，请按照...

中所述的堆栈跟踪进行操作

布局.js

import React, { useEffect } from "react";
import Card from "../Card/Card";
import styled from "styled-components";

//Redux

import { useDispatch, useSelector } from "react-redux";
import { getCharactersAction } from "../../actions/dataActions";


const Grid = styled.div`
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
  padding: 3.5rem 3rem;

  @media (max-width: 1100px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 480px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
  }

  @media (max-width: 420px) {
    margin-left: 20px;
  }

  @media (max-width: 380px) {
    margin: 0;
  }
`;

const Layout = () => {

  const dispatch = useDispatch();

  useEffect(() => {
    //Primera consulta a la API
    const loadCharacters = () => dispatch(getCharactersAction());
    loadCharacters();
    //eslint-disable-next-line
  }, []);

  const characters = useSelector((state) => state.personajes.personajes );
  const filterChar = useSelector((state) => state.personajes.personajesFilt );

  return (
    <div>
      <Grid>
        {characters.length === 0 ? null : (
            characters[0].map( personaje => (
                <Card 
                    key={personaje.id}
                    imgurl={`${personaje.thumbnail.path}.${personaje.thumbnail.extension}`}
                    name={personaje.name}
                />
            ))
        )}

        {filterChar.length > 0 ? (
            filterChar[0].map( per => (
                <Card 
                    key={per.id}
                    imgurl={`${per.thumbnail.path}.${per.thumbnail.extension}`}
                    name={per.name}
                />
            ))
        ) : null}
      </Grid>
    </div>
  );
}

export default Layout;

Navbar.js

    import React, { useState, useEffect } from 'react';
import { Nav, Logo, InputContainer, SearchIcon, TextInput, StarIcon } from './Navbar.elements';

import { useDispatch } from 'react-redux';
import { getSearchTermAction, filterSearchAction } from '../../actions/dataActions';

const Navbar = () => {

    //State para la busqueda del input

    const [searchTerm, setSearchTerm] = useState('');

    //Redux
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch( getSearchTermAction(searchTerm));

    }, [searchTerm, dispatch])

    if (searchTerm !== '') {
    
        const loadFilter = () => dispatch( filterSearchAction(searchTerm));
        loadFilter();
        
    }


    return ( 
        <>
            <Nav>
                <Logo />
                <InputContainer>    
                    <SearchIcon />
                    <TextInput 
                        placeholder="Buscar"
                        name={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </InputContainer>
                <StarIcon />
            </Nav>
        </>
     );
}
 
export default Navbar;

如果需要任何其他信息，请告诉，谢谢