為什么我的函式沒有回傳預期的輸出？

這只是課程中的一個練習，這個應用程式從 fruits 陣列中選擇一個隨機水果，然后 removeItem() 函式應該從陣列中洗掉那個并回傳修改后的陣列，但是我得到了一個奇怪的輸出，并且該功能不起作用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {makeFruitArray} from "./foods";
import {randomFruit} from "./helpers";
import {removeItem} from "./helpers";

class App extends React.Component {
    render() {
      let baseSupply = makeFruitArray();
      let fruitArray = makeFruitArray();
      let fruitItem = randomFruit(fruitArray);
      let remaining = removeItem(fruitArray, fruitItem);
      console.log(remaining);
        

        return (  
          <div>
            <p>Current Supply {baseSupply}</p>
            <p>I'd like one {fruitItem}</p>
            <p>Here is your {fruitItem}</p>
            <p>Current Supply {remaining}</p>
            <p>May I have another one??</p>

            <p>Here is your random fruit: </p>
          </div>
          )
    }
  }

  ReactDOM.render(<App/>, document.getElementById('root'));

helpers.js

import {makeFruitArray} from "./foods";
function randomFruit(importedArray) {
    let random = Math.floor(Math.random() * importedArray.length);
    return importedArray[random];
}

function removeItem(importedArray, item){
    for (let i = 0; i < importedArray.length; i  ) {
            if (importedArray[i] === item) {
                importedArray.splice(i, 1);
                return [...importedArray.slice(0, i), ...importedArray.slice(i   1)];
            }
            else {
                return "not found";
            }
        }
    }


export {randomFruit, removeItem};

食品.js

function makeFruitArray(){
    var foods = ["??", "??", "??", "??", "??"];
    return foods;
} 


export {makeFruitArray};

當我有櫻桃作為隨機水果時，我會得到這個奇怪的東西

當前供應??????????

我想要一個??

這是你的??

當前供應??????

我可以再來一個嗎??

這是你的隨機水果：

除此以外

當前供應??????????

我想要一個??

這是你的??

未找到當前電源

我可以再來一個嗎??

這是你的隨機水果：

================

問題可以在這里看到

function randomFruit(importedArray) {
  let random = Math.floor(Math.random() * importedArray.length);
  return importedArray[random];
}

function removeItem(importedArray, item) {
  for (let i = 0; i < importedArray.length; i  ) {
    if (importedArray[i] === item) {
      return [...importedArray.slice(0, i), ...importedArray.slice(i   1)];
    } else {
      return "not found";
    }
  }
}

function makeFruitArray() {
  var foods = ["??", "??", "??", "??", "??"];
  return foods;
}

let fruitArray = makeFruitArray();
let fruitItem = randomFruit(fruitArray);
let remaining = removeItem(fruitArray, fruitItem);

console.log({fruitArray, fruitItem, remaining});

uj5u.com熱心網友回復：

正如 himayan 所說，問題在于 splice 已經改變了陣列。

這是我的解決方案：

function removeItem(importedArray, item) {
  for (let i = 0; i < importedArray.length; i  ) {
    if (importedArray[i] === item) {
      importedArray.splice(i, 1);
      break;
    }
  }

  return importedArray;
}

uj5u.com熱心網友回復：

您的洗掉專案功能無法正常作業。而不是撰寫回圈和拼接陣列來創建一個新的，你應該只使用過濾器方法

function removeItem(importedArray, item) {
    console.log(importedArray);
    let newArray = importedArray.filter(function (element) {
        return element !== item;
    });
    return newArray;
}

uj5u.com熱心網友回復：

您的方法失敗的原因是 - 如果隨機的不是陣列中的第一項，則函式回傳not found. 它根本不會運行第二個回圈。

該splice方法更新原始陣列。當您將 傳遞fruitArray給removeItem方法時，它作為參考傳遞并在函式中使用更新它也splice將更新實際陣列。從陣列中洗掉專案的最簡單和最安全的方法是 -

function removeItem(importedArray, item) {
  const filteredArray = importedArray.filter((each) => each !== item);
  if (filteredArray.length === 0) return 'Not Found';
  return filteredArray;
}

標籤：javascript 反应

上一篇：嵌套映射函式在完成執行后導致TypeError

下一篇：每個專案的唯一ID映射計數