道具不能通过
我正在尝试用react做一个表情符号搜索应用程序，我有三个组件，第一个是' app‘，然后是一个'SearchBar’组件，它呈现了一个搜索栏，还呈现了第三个组件'EmojiContainer‘，它应该显示基于从'SearchBar’component.In传递给它的道具的表情符号。'SearchBar‘组件我有'emojiDescriptions’对象，它将表情图标作为关键字，每个表情符号的描述作为值。示例：
'': ['happy', 'smiley', 'smiling', 'smile', 'laugh', 'laughing', 'positive emotion', 'every emoji', '2']，并且基于搜索栏输入过滤emoji的过程已经解决了，问题出在'EmojiContainer‘组件中，当我第一次通过'npm start’启动应用程序时，emoji可以正确显示，但页面不能完全加载，但是一旦我刷新它，emoji就会消失，即使我在搜索栏中键入一些东西，也不会显示emoji，当我在'EmojiContainer‘中修改内容时，同样的事情也会发生，所有的emoji都会显示，但页面不会完全加载，但一旦我刷新它，emoji就会消失。这是我遇到过的最奇怪的问题。这是'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
谢谢你的帮忙!
回答 1
Stack Overflow用户
发布于 2021-10-08 18:47:47
在你的代码中有一些东西正在改变现有的状态，这在React中是你不应该做的，我也会在你的代码中做一些改变，以便在每次重新渲染时再次初始化变量。
我要做的第一件事是将emojiDescriptions变量移到组件(可能是常量文件或类似的文件)之外，只要确保它不在组件内就行了，因为这是一个不会改变的变量。
其次，当搜索栏的内容发生变化时，您的useEffect应该负责处理过滤表情的所有逻辑，您可以实现将内容作为依赖项添加到useEffect钩子的依赖项数组参数中，如下所示：
React.useEffect(() => {
// Logic here
}, [content]);这意味着当输入改变时，效果将与所有的逻辑一起运行。
第三个是将你的情绪变量移到useEffect中，因为它不应该在它的外部运行，为了防止易变性，不要在emojiIcons数组中使用push，而且使用Object.entries你可以做一个one线性，而不是在过滤表情符号后做一个for each。
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
https://stackoverflow.com/questions/69500229
复制相似问题
腾讯云开发者
