TypeError：无法读取未定义反应的属性“长度”答案

【问题标题】：TypeError: Cannot read property 'length' of undefined reactTypeError：无法读取未定义反应的属性“长度”
【发布时间】：2020-07-27 18:10:03
【问题描述】：

我正在用 React 做一个简单的练习。练习的目的很简单：

从数组中随机抽取水果
记录消息“我想要一个 RANDOMFRUIT，拜托。”
记录消息“给你：RANDOMFRUIT”
记录消息“美味！我可以再来一份吗？”
从水果数组中删除水果
记录消息“对不起，我们都出局了。我们还剩 FRUITSLEFT。

在运行此代码时，我遇到了以下错误。出于某种原因，“长度”似乎是个问题。

TypeError: Cannot read property 'length' of undefined
Module../src/index.js
C:/Users/jaina/Desktop/ReactAPPS/exercise1/exercise-one/src/index.js:15
  12 | // Remove the fruit from the array of fruits
  13 | let remaining = remove(foods, fruit);
  14 | // Log the message “I’m sorry, we’re all out. We have FRUITSLEFT left.”
> 15 | console.log(`I’m sorry, we’re all out. We have ${remaining.length} other foods left.`);
  16 |

它还显示 __webpack_require__ 以及其他 webpack 警告。但我假设不运行的主要原因是“长度”未定义。

index.js

import foods from './foods';
import { choice, remove } from './helpers';

// Randomly draw a fruit from the array
let fruit = choice(foods);
// Log the message “I’d like one RANDOMFRUIT, please.”
console.log(`I’d like one ${fruit}, please.`);
// Log the message “Here you go: RANDOMFRUIT”
console.log(`Here you go: ${fruit}`);
// Log the message “Delicious! May I have another?”
console.log('Delicious! May I have another?');
// Remove the fruit from the array of fruits
let remaining = remove(foods, fruit);
// Log the message “I’m sorry, we’re all out. We have FRUITSLEFT left.”
console.log(`I’m sorry, we’re all out. We have ${remaining.length} other foods left.`);

Foods.js

const foods = [
    "????", "????", "????", "????", "????", "????", "????", "????",
    "????", "????", "????", "????", "????", "????", "????",
];

export default foods;

helper.js

function choice(items){
    let idx = Math.floor(Math.random()* items.length);
}

function remove(items, item){
    for (let i = 0; i < items.length; i++){
        if(items[i] === item){
            return [ ...items.slice(0,i), ...items.slice(i+1)];
        }
    }
}

export {choice, remove};

感谢任何帮助。

【问题讨论】：

我猜if 条件永远不会匹配，所以它永远不会进入块内并且永远不会运行return。所以，它只是隐式返回undefined。
同时验证您的数据${remaining && remaining.length}

标签： javascript reactjs undefined create-react-app

【解决方案1】：

在helper.js 中，如果你的函数remove 没有找到任何东西，它将返回未定义。那么，当你说...

console.log(`I’m sorry, we’re all out. We have ${remaining.length} other foods left.`);

...你假设 remaining 是一个数组，但它实际上是未定义的。

尝试将return items; 放在remove 函数的末尾，在for 循环之后。

【讨论】：

非常感谢。我添加了这一点，该程序成功运行。谢谢。

【解决方案2】：

在上面的代码中，如果在 remove 函数中找不到任何内容，请返回 items。

function remove(items, item){
    for (let i = 0; i < items.length; i++){
        if(items[i] === item){
            return [ ...items.slice(0,i), ...items.slice(i+1)];
        }
    }
    // change this to whatever you want in case it was able to find item to remove
    return items;
}

【讨论】：

【解决方案3】：

您的问题似乎在这里：

function choice(items){
    let idx = Math.floor(Math.random()* items.length);
}

所以let fruit = choice(foods)，水果永远是未定义的。

尝试像这样返回辅助函数的值：

function choice(items){
   let fruitIndex = Math.floor(Math.random()* items.length);
   return items[fruitIndex];
}

您还应该找到选择的索引并返回水果，否则choice 将只返回一个数字。

【讨论】：

【解决方案4】：

修改您的选择并删除功能

function choice(items) {
    return Math.floor(Math.random()*items.length);
}

function remove(items, item) {
    return items.filter(e => e !== item);
};

【讨论】：