反应：数组未定义答案

【问题标题】：react: Array is undefined反应：数组未定义
【发布时间】：2019-08-25 16:13:59
【问题描述】：

我有一个数组，里面有像这样的对象

OrchardSite > Array(16) > 0: {blocks: Array (3), name: "asdasd", code: "R101A"}
                          1: {blocks: Array (7), name: "dasdas", code: "R555"}

我有一个看起来像这样的 JSX

<select className="input-field-slider dropdown w-select" onChange={() => this.setOrchard}>
    <option>All Sites</option>
    {orchardSites
        .map((orchardSite, i) => (
            <option key={i} value={orchardSite.code}>
                {orchardSite.code + " " + orchardSite.name}
            </option>
        ))}

每次用户从下拉列表中选择一个选项时，我都会触发此功能..

setOrchard = (event) => {
  const orchardId = event.target.value;

  console.log("orchardID", orchardId) // returns selected ID
  console.log("OrchardSite", this.props.metadata.OrchardSites) // returns array
  console.log("testing1", this.props.metadata.OrchardSites[parseInt("R1018A")] // undefined
  console.log("testing2", this.props.metadata.OrchardSites[parseInt(orchardId)]) // undefined
  console.log("new value", this.props.metadata.OrchardSites[parseInt(orchardId)].blocks) // Cannot read property 'blocks' of undefined

   if (orchardId.length > 0) {
      if (!this.props.metadata.OrchardSites[parseInt(orchardId)].blocks) 
          this.props.metadata.orchardSites[parseInt(orchardId)].blocks = []
            console.log("SetttingOrchardLocation", this.props.metadata.orchardSites)
            this.setState({ orchardId: orchardId, block: null, area: null, row: null, site: Object.assign({}, this.props.metadata.orchardSites[parseInt(orchardId)]) })
            console.log("Testing OrchardId", this.props.metadata.orchardSites[parseInt(orchardId)])
        // parseInt to get access to the array index, (Maybe I need to .ToString() somewhere?
    }
}

返回..

未捕获的类型错误：无法读取未定义的属性“块”

我怎样才能访问这个数组？

【问题讨论】：

我认为问题来自您的this.props.metadata，如果您从 fetch API 或使用 redux 获取此道具...，在第一次渲染时，您的道具将为空，所以您需要检查this.props.metadata 是否有价值（或this.props.metadata.OrchardSites[parseInt(orchardId)]）。
这一行也会报错：this.props.metadata.OrchardSites 然后this.props.metadata.orchardSites
是的，我注意到了错字，它没有任何区别......在第一次渲染时，我可以完全访问道具，我有一个 console.log
console.log(this.props.metadata.OrchardSites) 和 console.log(this.props.metadata.OrchardSites[parseInt(orchardId)]) 在您的 console.log("orchardID", orchardId) 之后，看看显示什么
console.log("orchardID", orchardId) 返回选中的值 console.log("OrchardSite", this.props.metadata.OrchardSites) 返回如上所示的数组，console.log("testing1", this.props.metadata.OrchardSites[parseInt("R1018A")]) 未定义，字符串为硬编码 id，console.log(this.props.metadata.OrchardSites[parseInt(orchardId)]) 未定义

标签： javascript arrays reactjs ecmascript-6 jsx

【解决方案1】：

如果 orchardSite（在您的 jsx 和 onClick 函数中）相同，那么您希望使用数组索引（在 jsx 中的 i）而不是 orchardSite.code 访问数组。

这是因为 OrchardSites[orchardSite.code] 在某些情况下可以未定义，但 OrchardSites[parseInt(i)] 不会。

我建议你将'value'属性改为“i”而不是orchardSite.code

【讨论】：

不完全...这样做会给我一个类似的错误“未捕获的类型错误：无法读取未定义的属性 '1'”
当然你可能需要 parseInt。对不起，我错过了
另外，刚刚注意到您没有在使用的 if 语句中将 OrchardSites 大写。您可能也想检查一下。只是 this.props.metadata.orchardSites 而不是 this.props.metadata.OrchardSites
parseInt 在哪里？关于价值？是的，我修复了区分大小写的问题，因为代码甚至没有到达那一行
OrchardSites 是一个数组。它不能有“R1018A”作为索引。这就是为什么你得到一个未定义的。数组索引应该是从 0 开始的整数。在你的 jsx 中，将“value”作为“i”传递给