道具没有通过

Question

我正在尝试制作一个仅用于练习的表情符号搜索应用程序，我有三个组件，第一个是“APP”，然后是一个“SearchBar”组件，它呈现搜索栏并呈现第三个组件，即“ EmojiContainer'应该根据从'SearchBar'组件传递给它的道具显示表情符号。在'SearchBar'组件中我有'emojiDescriptions'对象，它具有表情符号图标作为键和每个表情符号的描述作为值.示例：

'????': ['happy', 'smiley', 'smiling', 'smile', 'laugh', 'laughing', 'positive emotion', 'every emoji', '2']

，根据搜索栏输入过滤表情符号的过程已经解决，问题出在“EmojiContainer”组件中，当我第一次通过“npm start”启动应用程序时，表情符号正确显示，但页面没有完全加载，但是一旦我刷新它，表情符号就会消失，即使我在搜索栏中输入某些内容，我也没有显示任何表情符号，当我修改某些内容时也会发生同样的事情 在“EmojiContainer”中，所有表情符号都会显示，但页面没有完全加载，但是一旦我刷新它，表情符号就会消失。 这是我遇到过的最奇怪的问题。 这是“SearchBar”组件的代码：

import React, { useEffect, useState} from 'react';
import EmojiContainer from '../emoji-container/emojiContainer';
import { BeakerIcon } from '@heroicons/react/solid';
import './searchBar.scss'
export default function SearchBar() {
    const [content, setContent] = useState('');
    const [emojiIcons] = useState([])
    useEffect(() => {
        for (let i = 0; i < emotions.length; i++) {
            emojiIcons.push(Object.keys(emojiDescriptions)[parseInt(emotions[i].slice(-1))])
        }
    });

    // let emojiIcons = [];
    let emojiDescriptions = {
        '????': ['happy', 'positive emotion', 'smile', 'smiling', 'every emoji', '0'],
        '????': ['happy', 'smiley', 'smiling', 'positive emotion', 'every emoji', '1'],
        '????': ['happy', 'smiley', 'smiling', 'smile', 'laugh', 'laughing', 'positive emotion', 'every emoji', '2'],
        '????': ['happy', 'smiley', 'smiling', 'smile', 'laugh', 'laughing', 'positive emotion', 'every emoji', '3'],
        '????': ['happy', 'smiley', 'positive emotion', 'smile', 'every emoji', '4'],
        '????': ['smile', 'smiling', 'every emoji', '5'],
        '????': ['smile', 'smiling', 'upside down face', 'every emoji', '6'],
        '????': ['wink', 'winky face', 'every emoji', '7'],
        '????': ['naughty face', 'laugh', 'laughing', 'every emoji', '8'],
        '????': ['happy', 'positive emotion', 'smile', 'smiling', 'every emoji', '9'],
        '????': ['happy', 'smiley', 'smiling', 'positive emotion', 'every emoji', '10'],
        '????': ['happy', 'smiley', 'smiling', 'smile', 'laugh', 'laughing', 'positive emotion', 'every emoji', '11'],
        '????': ['happy', 'smiley', 'smiling', 'smile', 'humble', 'every emoji', '12'],
        '????': ['kiss', 'affection', 'every emoji', '13'],
        '????': ['kiss', 'affection', 'every emoji', '14'],
        '????': ['innocent', 'innocense', 'every emoji', '15'],
        '????': ['heart eyes', 'love', 'affection', 'cat', 'every emoji', '16'],
        '????': ['heart eyes', 'love', 'affection', 'every emoji', '17'],
        '????': ['angry', 'angry face', 'every emoji', '18'],
        '????': ['angry', 'angry face', 'devil', 'devil face', 'every emoji', '19'],
        '????': ['monster', 'angry monster', 'angry', 'every emoji', '20'],
        '????': ['monster', 'every emoji', '21'],
        '????': ['skull', 'every emoji', '22'],
        '????': ['alien', 'every emoji', '23'],
        '????': ['ghost', 'every emoji', '24'],
        '????': ['robot', 'every emoji', '25'],
        '????': ['poop', 'eww', 'gross', 'every emoji', '26'],
        '????': ['sleep', 'sleepy', 'sleepy face', 'every emoji', '27'],
        '????': ['sleep', 'sleepy', 'every emoji', '28'],
        '????': ['truck', 'every emoji', '29'],
        '????': ['money', 'money eyes', 'every emoji', '30'],
        '????': ['shoked', 'every emoji', '31']
    };
    let emotions=Object.values(emojiDescriptions).filter((emo) => emo.find((word) => word.includes(content)));
    return (
        <div className='search-bar-container'>
            <div className="title">
                <BeakerIcon />
                Emoji Search
            </div>
            <input type="text" className="search-bar" placeholder='Search for an emoji!' onChange={(e) => setContent(e.target.value)} value={content} />
            <EmojiContainer emojis={emojiIcons} />
        </div>
    )
}

这是“EmojiContainer”组件的代码：

import React from 'react'
import './emojiContainer.scss';
export default function EmojiContainer(props) {
    console.log(props.emojis)
    let emojiList = props.emojis.map((emo,ind)=>
        <li  className='emoji' key={ind}>{emo}</li>
    );
    return (
        <ul className='emoji-container'>
            {emojiList}
        </ul>

    )
}

这是项目的链接，因此您可以浏览文件：https://github.com/Marouane328/Emoji-search-with-react/tree/master/emoji-search

感谢您的帮助！

Answer 1

您的代码中有一些东西正在改变现有状态，这在 React 中是您不应该做的事情，我也会对您的代码进行一些更改，以便在每次重新渲染时再次初始化变量。

我要做的第一件事是将 emojiDescriptions 变量移到组件之外（可能是常量文件或类似的东西），只要确保它不在组件内，因为这是一个获胜的变量不要改变。

其次，您的 useEffect 应该是处理搜索栏内容更改时过滤表情符号的所有逻辑的人，您可以实现添加内容，作为 useEffect 钩子的依赖数组参数中的依赖项，如下所示：

 React.useEffect(() => {
   // Logic here
 }, [content]);

这意味着当输入改变时，效果将在内部运行所有逻辑。

第三个是将你的情绪变量移动到 useEffect 中，因为它不应该在它之外运行，并且为了防止可变性，不要在 emojiIcons 数组中使用 push，同样使用 Object.entries 你可以做一个一个衬垫，而不是在过滤表情符号后为每个衬垫做一个。

React.useEffect(() => {
  const emojis = Object.entries(emojiDescriptions)
    .filter(([_key, value]) => value.find((word) => word.includes(content)))
    .map(([key]) => key);

  setEmojiIcons(emojis);
}, [content]);

现在你应该可以过滤了，如果你刷新页面，一切都应该恢复正常，你应该可以看到所有的表情符号。

我这里有一个沙箱，里面有工作代码：https://codesandbox.io/s/focused-archimedes-6i55k