類型錯誤：無法讀取未定義反應的屬性“長度”

Question

我正在 React 中做一個簡單的練習。 練習的目標是簡單地：

• 從數組中隨機抽取水果
• 記錄消息“請給我一個隨機水果”。
• 記錄消息“Here you go: 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 警告。 但我假設不運行的主要原因是“長度”未定義。

索引.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.`);

食品.js

const foods = [
    "🍇", "🍈", "🍉", "🍊", "🍋", "🍌", "🍍", "🍎",
    "🍏", "🍐", "🍒", "🍓", "🥝", "🍅", "🥑",
];

export default foods;

助手.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};

任何幫助表示贊賞。

Answer 1

在helper.js中，如果您的 function remove沒有找到任何內容，它將返回未定義。 然后，當你說...

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

...你假設remaining是一個數組，但它實際上是未定義的。

嘗試放置return items; 在remove function 的末尾，在 for 循環之后。

Answer 2

在上面的代碼中，如果在remove function 中找不到任何內容，則返回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;
}

Answer 3

您的問題似乎出在這里：

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

所以let fruit = choice(foods) ， fruit 永遠是未定義的。

嘗試像這樣返回助手 function 的值：

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

您還應該找到選擇的索引並返回水果，否則choice將只返回一個數字。

Answer 4

修改您的選擇並刪除 function

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

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