使用反应选择我遇到了下一个问题:无法读取未定义的属性“值”

2024-03-30

我在用着react-select。当我从 select 中选择一个确定值时,我遇到了下一个问题

类型错误:无法读取未定义的属性“值”

另外,从reducer获取的值todoList没有显示,我看不到它们。

这是我的代码:

import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";

class SelectedTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTodo: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  bringTodos = () => {
    //WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
    return this.props.todoList.map(todo => {
      return (
        <option key={todo._id} value={todo._id}>
          {todo.name}
        </option>
      );
    });
  };

  handleChange = e => {
    this.setState({ selectedTodo: e.target.value });
  };

  componentDidMount() {
    this.props.searchTodos();
  }

  render() {
    const { loading } = this.props;

    if (loading) {
      return <span>...Loading</span>;
    }
    return (
      <Select
        className="form-container"
        classNamePrefix="react-select"
        placeholder="Please, insert a todo"
        value={this.state.selectedTodo}
        onChange={this.handleChange}
        options={this.bringTodos()}
      />
    );
  }
}

function mapState(state) {
  return {
    todoList: state.todosDs.todoList
  };
}
const actions = {
  searchTodos
};
SelectedTodo = connect(
  mapState,
  actions
)(SelectedTodo);

export default SelectedTodo;

预期的行为是下拉列表显示待办事项,当我选择待办事项值时,我没有收到错误

类型错误:无法读取未定义的属性“值”


套餐react-select直接返回json其值类似于

{label:"ABC", value:"abc"}

改变这个

  handleChange = (e) =>{
  this.setState({selectedTodo: e.target.value});
  }

To this

handleChange = (e) =>{
  this.setState({selectedTodo: e});
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用反应选择我遇到了下一个问题:无法读取未定义的属性“值” 的相关文章

随机推荐

  • Android:寻找不同的 TimePicker 样式

    大家好 一个简短的问题 我一直在寻找这种风格的 TimePicker 但到目前为止没有结果 如图所示 机器人绘图 http www droiddraw org widgetguide html 我开始怀疑这种风格的存在 P 任何知道如何获得
  • 在 Helm 值属性中传递数组

    我想将数组作为 Helm 中 yaml 值文件 中的属性传递 我尝试过的 Attempt elasticsearch uri 127 0 0 1 9200 127 0 0 2 9200 Error ReadString 期望 或n 但发现
  • 阻止设计者调用 getter(VS 2008,WinForms)

    我有一个简单的用户控件 其中包含一个最初为空的组合框 该 CB 的 setter 向其添加项目 而 getter 返回选定的项目 当将此 UC 添加到 Form 时 设计者会自动调用空 CB 的 getter 稍后会调用用项目填充 CB 的
  • 获取下周一的日期

    如何在 JavaScript 中获取下周一 我在互联网上找不到任何相关内容 我也尝试了很多代码并对此有所了解 但我无法真正做到这一点 这是我的代码 var d new Date var day d getDay d new Date d s
  • 访问 PHP 中的活动会话

    如何获取服务器上所有活动 PHP 会话的列表并从一个用户的实例中访问它们 激励案例是显示网站上所有当前活动用户的列表 其中用户名存储在每个用户的 PHP 会话中 注意 我知道我可以通过数据库 甚至文件系统 创建自己的状态 但我正在寻找一种利
  • Elasticsearch - 合并多个文档中的字段

    假设我有一堆这样的文档 foo 1 2 3 foo 3 4 5 对于针对这些文档运行的查询 我正在寻找一种方法来返回所有值的数组foo 最好是唯一的值 但重复也可以 foo 1 2 3 3 4 5 我研究了聚合 API 但我不知道如何实现这
  • 缩略图点击后消失,FancyBox

    我创建了 FancyBox 画廊 但现在 当我单击缩略图时 它会按计划显示图像库 但在后台我可以看到所有缩略图都一一消失 F5 或页面重新加载后 所有缩略图都会恢复 My code a class fancybox title a a cl
  • Visual Studio 2015 预览版中的 Windows Phone 8.0 应用程序打包

    我通过我的学生 Dreamspark 帐户安装了 Visual Studio 2015 Ultimate Preview 我将其安装在更新的 Windows 8 1 之上 工作站 我有 Windows Phone 8 0 应用程序 需要将其
  • 如何冻结所有可冻结的 WPF 对象?

    我想冻结窗口中的所有可冻结对象 以获得更好的性能 为此 我使用了几个像这样的循环 foreach Brush item in FindLogicalChildren
  • 如何绘制方向箭头

    我有很多方向和角度的线条 我使用它们来绘制它们UIBezierpath 我需要在线的一端画一个箭头 动态地取决于给定点 Edit Edit 2 杰克的回答是我的代码 let y2 line point2Y let path UIBezier
  • 将自然数转换为特定基数并将其作为列表返回

    我想将函数的结果显示为列表而不是数字 我的结果是 define lst list define num gt base n b if zero n append lst list 0 append lst list 10 num gt ba
  • 如何在 HBase 中续订过期的 Kerberos 票证?

    我有一个小型 spring 服务 它提供基本功能 例如从 hbase 表中放入 删除 获取 一切似乎都正常 但有一个问题 启动 Tomcat 服务器 10 小时后 我的 kerberos 票证过期 因此我应该更新它 我尝试对 hbase 使
  • 仅在成功 Stripe Checkout 付款后才提交 Rails 表格

    我正在使用 Rails 4 2 并尝试集成 Stripe Checkout https stripe com docs checkout guides rails https stripe com docs checkout guides
  • 间隙误差。 Pandas 使用动态查询字符串过滤数据帧。

    大家好 该问题与 Python 的反向间隙错误有关 我正在创建一个动态查询字符串以在 pandas 中进行过滤 代码是 filters dict wlbWellType EXPLORATION query string index 0 fo
  • ObjectOutputStream 方法:writeBytes(String str) 与 writeUTF(String s);

    两者之间的主要区别是什么 它们仍然都是用于编写字符串 public void writeUTF String str throws IOException Primitive data write of this String in mod
  • 是否有可能在 Flutter 中动态初始化 Firebase?

    我尝试根据用户语言偏好来初始化 Firebase 例如 用户打开应用程序 选择语言A Flutter应该初始化项目A 配置等 当用户选择不同的语言时也是如此 问题是 iOS 需要有默认的 GoogleService Info plist 文
  • Selenium Ruby 绑定功能文档

    我是 Selenium Ruby 绑定的新手 我想知道可以在其中找到可用于 Ruby 驱动程序功能的选项的文档网站 我在网上搜索了一下 发现大部分与Java相关的帖子 https code google com p selenium wik
  • 控制和创建多个精灵数组 Java Libgdx

    我正在尝试创建一个具有精灵的游戏 并且每秒都会生成另一个精灵 我尝试使用它作为基础 https github com libgdx libgdx wiki A simple game https github com libgdx libg
  • java 使用外部 jar 文件构建 ant 文件

    我创建了一个 ant 构建文件来将 java src 编译为 jar 文件 它使用外部 jar 文件 我的文件目录 src android Address java HelloServer java HelloServerResource
  • 使用反应选择我遇到了下一个问题:无法读取未定义的属性“值”

    我在用着react select 当我从 select 中选择一个确定值时 我遇到了下一个问题 类型错误 无法读取未定义的属性 值 另外 从reducer获取的值todoList没有显示 我看不到它们 这是我的代码 import Selec