尝试增加单词发音功能 #50
尝试增加单词发音功能 #50
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/kaiyiwing/qwerty-learner/hinw5p8mq |
|
非常感谢您的贡献 |
|
非常感谢您的贡献！ |
chengluyu
added
Area: Experience
src/hooks/usePronouncation.ts
Outdated
| const pronunciationApi = 'http://dict.youdao.com/dictvoice?audio=' | ||
|
|
||
| export default function usepronunciationSound(word: string): [PronounceFunction] { | ||
| // SAFETY: We are trying to build an hook here. |
There was a problem hiding this comment.
这个地方 eslint 报错的原因是，自定义hook没有使用规范的命名，eslint没有识别成hook
应该命名为 usePronunciationSound
非常抱歉这个 bug 应该是我们本身切换单词逻辑问题 |
|
Sorry for the bad code ...
提交 aefd303 修复了这个Bug。使用State包装了
这是重复渲染造成的问题，暂时的解决方案是：切换词典后设置 |
第一种我觉得没问题，但控制台会报 warning，目前看来不影响操作。 第二个解决方案确实欠妥，如有时间的话，可以尝试其他方案。 以及ui上，我个人觉得，目前一个 喇叭状icon 和 麦克风icon 会让用户产生混乱。 其次没有引入 英音和美音的切换，我个人有个想法是，可以在hover发音功能切换时弹出下拉框，可以选择英音或者美音。 所以在ui上应该有改进空间。ui我们使用的是 css 库 tailwind，可以了解一下。 我们非常喜欢你的贡献，如果有兴趣可以一起来维护项目～ |
There was a problem hiding this comment.
Thanks for your excellent contribution!
目前还有改进空间，也需要对 英音美音 在ui上进行显示与切换，细节可以参考 #50 (comment)
| @@ -62,12 +62,12 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo | |||
| }, [hasWrong, playBeepSound]) | |||
|
|
|||
| useLayoutEffect(() => { | |||
| if (inputWord.length === 0) { | |||
| if (isStart && inputWord.length === 0) { | |||
There was a problem hiding this comment.
这里不应该使用 useLayoutEffect，useLayoutEffect是与dom更新同步，而useEffect是在dom更新后进行。盲目的使用useLayoutEffect可能会引发其他问题。可以参考链接：https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect
以及，对 useEffect类函数的依赖可能理解不对，这里 hooks 内部没有使用 hasWrong，可以在依赖项中移除。
| @@ -162,6 +162,10 @@ const App: React.FC = () => { | |||
| (dictName: string) => { | |||
| setOrder(0) | |||
| setIsLoading(true) | |||
| // Need to stop the game, in order to prevent pronounce wrong word. | |||
| // Besides, it makes sense because users are about to stop when they change dict/chapter. | |||
| // Otherwise, introduce a new parameter to allow pronunciation begin. | |||
There was a problem hiding this comment.
这种方案可能确实很是合理的。
Need more comments @chengluyu
尝试给项目增加一个单词发音的功能
Hi, developers:
非常喜欢这个项目！我花了一些时间写了单词发音功能的雏形。调用了有道词典的发音API，看起来效果不错。
Hope you like it.