繁体   English   中英

React-Redux 组件未显示

React-Redux Component Not Showing Up

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我目前正在通过制作一个简单的待办事项列表来练习 React 和 Redux,您可以在其中检查项目是否完整。 我正在尝试实现一个基本按钮来测试我的代码是否可以将 Todo 项切换为完整或不完整。 我正在尝试在 AllTodos.js 内的 Todo 组件内呈现一个按钮(ToggleBox.js),但该框似乎没有出现在 map function 但是如果我放置在 map function 之外,它确实会显示出来。

任何有关为什么会发生这种情况的帮助将不胜感激。 我将发布下面两个文件中的代码。

谢谢你,利亚姆

AllTodos.js:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadData, selectAllTodos, toggleTodo } from './allTodosSlice';
import { Todo } from '../../components/Todo';
import { ToggleBox } from '../../components/ToggleBox';

export const AllTodos = () => {
const allTodos = useSelector(selectAllTodos);
const dispatch = useDispatch();

const onFirstRender = () => {
    dispatch(loadData());
}

useEffect(onFirstRender, []);

const onToggleTodoHandler = (todo) => {
    dispatch(toggleTodo(todo));
}

return (
    <div>
        {allTodos.map((todo) => (
            <Todo todo={todo} complete={todo.completed} key={todo.id}>
                <ToggleBox
                    onClickHandler={() => onToggleTodoHandler(todo)}
                />
            </Todo>
        ))}
    </div>
)
}

切换框.js:

export const ToggleBox = ({ children, onClickHandler }) => {
return (
    <button className="check-box" onClick={onClickHandler}>
    </button>
)

}

问题暂未有回复.您可以查看右边的相关问题.
1 React-Redux组件未在商店中显示新道具

我正在尝试使用react创建自己的警报组件(在这种情况下,也是Bootstrap v4)。 基本上,如果发生了某些事情需要通知用户,请创建一条消息,然后将其放入存储中,并做出反应来生成警报。 我知道我正在做的事情应该是可能的,但是我很新来做出反应,以至于我缺少/不了解反应如何工作,这导致没有 ...

2 React-Redux组件状态

tl; dr我试图将初始状态保存在子容器组件中,但是每次Redux存储更新时,它都会更新为新值。 我可能错过了配置方面的内容,需要我帮忙进行整理。 index.tsx AppProps.ts Actions.ts Reducers.ts App.tsx ...

3 组件未更新(react-redux)

我是另一个有同样问题的人; 抱歉,我还看不到我的错误。我怀疑是某种与突变有关的东西,但是我(几乎)尝试了一切,发了疯。 当我向商店添加商品时,我的组件没有更新,似乎只是一次渲染(第一次) 我正在尝试生命周期,但一无所获 ...

4 react-redux未连接存储以反应组件

我正在使用react v0.14.3 , redux v3.0.5 , react-redux v4.02和immutable v3.7.6 。 我试图使用react-redux将redux存储与react组件连接在一起,但是我似乎无法将存储数据传递给组件。 我的控制台没有错误,在redux ...

5 React-redux:如何将redux表单道具冒泡到父组件

所以我一直在实现一个模式表单,允许我在列表中创建新用户,以及编辑它们。 我已经设置它,以便我在Modal中的实际形式在它自己的组件中,所以我可以很容易地将initialValues传递给表单以便填充它。 我遇到的问题是,当我尝试使用redux的handleSubmit函数时,我似乎无法从表单 ...

6 用react设置react-redux

我正在努力使实施redux变得react 。 我了解有关stores , reducers和actions如何工作的基础知识。 我现在正在尝试设置react-redux 。 我知道在线上有很多文档,而且已经解释了,跟随起来有些棘手。 这是我在下面尝试过的方法,但是没有用。 任何人都 ...

7 React-Redux应用程序未在Heroku上显示图像

因此,我使用react-redux和webpack构建了我的应用程序,它在本地运行没有任何问题。 当我在heroku上部署应用程序时,不显示图像,而是看到一个损坏的图标。 图像的路径应该很好: 我没有收到与控制台中图像有关的任何错误,只是没有加载。 这是我的项目: https ...

8 React-Redux 中的 API 未显示图像

我正在使用 react-redux 和 Django Rest 框架构建电子商务。 现在我面临一个问题。 不知何故,我意识到,问题出在前端部分。 我正在从 django 管理面板上传图像。 而且之前效果很好。 但是今天我意识到,我新上传的图片没有显示在前端。 我发现 build/images 和 r ...

10 React-Redux - 显示和隐藏组件

目标是当我将鼠标悬停在导航栏上的链接上时,我需要显示组件调用ProductDescription,并在鼠标未结束时隐藏组件。 我有一个例子 https://www.dkny.com/ba/ 目标是做出类似的东西。 app.js 导航组件 ProductDe ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM