道具不会通过

Question

我试图制作一个带有反应的表情符号搜索应用程序，只是为了练习，我有三个组件，第一个是“APP”，然后是一个“SearchBar”组件，它呈现一个搜索栏，还呈现第三个组件，即“EmojiContainer”应该根据从“SearchBar”组件传递给它的道具显示表情符号。在“SearchBar”组件中，我有“emojiDescriptions”object，它以表情符号图标作为键，将每个表情符号的描述作为值。 例子：

'😂': ['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>

    )
}

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

感谢您的帮助！

Answer 1

您的代码中有些东西正在改变现有的 state，这在 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