如何返回 React 容器的數值而不是 object？

Question

我正在嘗試學習 React，並且正在開發一個簡單的 web 應用程序來實現我迄今為止在網上學到的東西。

我有一個名為CardDatabase.js的容器，它返回的只是一個值。 這個值稱為reduceArray ，它是一個調用了reduce()方法的數組。 當我渲染<CardDatabase.js />時，值會按預期出現在瀏覽器和控制台中（在屏幕截圖中，它是 86）。 但是，當我嘗試將<CardDatabase />的值分配給App.js中的calculate方法內的變量w時，會返回 object 而不是數值（檢查屏幕截圖中的控制台）。

如何將<CardDatabase />的數值分配給變量，以便我可以使用它來計算一些簡單的數學？

我也嘗試使用 props 和this.state但是根據我得到的控制台錯誤和 React 文檔，我們不能修改 props 的值？ 所以當我嘗試類似的事情時：

const array = (rarityOfArray) => {
        filteredArray = rarityOfArray.filter(item => item.key <= level)

        for(let x = 0; x < filteredArray.length; x++) {
            pushedArray.push(filteredArray[x].cardsRequiredToUpgrade)
            console.log(pushedArray);
        }

        props.array = pushedArray.reduce((a, b) => a + b, 0);
        console.log("Reduced - " + reducedArray);

        return props.array
    }

我收到此錯誤消息： TypeError: Cannot assign to read only property 'array' of object '#<Object>'

任何幫助或方向將不勝感激。

應用程序.js

import React, {Component} from 'react';

// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

// Components 
import CardRarityDropdown from './components/CardRarityDropdown';
import CardLevelDropdown from './components/CardLevelDropdown';
import CardAmountInput from './components/CardAmountInput';
import CardCalculationsButton from './components/CardCalculationsButton';

//Containers
import CardDatabase from './containers/cardDatabase/CardDatabase';

class App extends Component {

  constructor() {
    super();
    this.state = {
      cardRarity: "",
      cardLevel: "",
      amountOfCards: "",
    }
    this.setCardValues = this.setCardValues.bind(this);
  }

  setCardValues = (event) => {
    const {name, value} = event.target

    this.setState({
          [name]: value
    })
  }

  calculate = () => {
    let v = this.state.cardRarity;
    console.log("v: " + v)

    let w = <CardDatabase />
    console.log("w: " + w)

    let x = v - w;
    console.log("x: " + x)

    let y = this.state.amountOfCards;
    console.log("y: " + y)

    let z = x - y;
    console.log("z: " + z)

    return z
  }

  render () {
    return (

        <div>
          <h1 id="superCellText">Clash Royale Card Calculator</h1>

          <CardRarityDropdown
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity} />

          <CardLevelDropdown
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity}
            cardLevel={this.state.cardLevel} />

          <CardDatabase
            cardRarity={this.state.cardRarity}
            cardLevel={this.state.cardLevel} />

          <CardAmountInput
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity}
            amountOfCards={this.state.amountOfCards} />

          <CardCalculationsButton
            calculate={this.calculate}
            cardRarity={this.state.cardRarity} />
        </div> 
    );
  }
}
export default App;

CardDatabase.js

import common from './Common';
import rare from './Rare';
import epic from './Epic';
import legendary from './Legendary';


const CardDatabase = (props) => {

    const card = props.cardRarity;
    const level = props.cardLevel;
    let filteredArray = [];
    let pushedArray = [];
    let reducedArray = [];

    const array = (rarityOfArray) => {
        filteredArray = rarityOfArray.filter(item => item.key <= level)

        for(let x = 0; x < filteredArray.length; x++) {
            pushedArray.push(filteredArray[x].cardsRequiredToUpgrade)
            console.log(pushedArray);
        }

        reducedArray = pushedArray.reduce((a, b) => a + b, 0);
        console.log("Reduced - " + reducedArray);

        return reducedArray
    }

    if(card === "9586") {return array(common)}

    if(card === "2586") {return array(rare)}

    if(card === "386") {return array(epic)}

    if(card === "36") {return array(legendary)}

    if(card === "")  {return null}
}
export default CardDatabase;

Answer 1

Reddit 和 Discord 上的人們給了我相同的反饋，如果該組件沒有返回任何與 UI 相關的內容，我不應該使用該組件。 因此， CardDatabase.js不應該是一個組件，而是一個簡單的 function。

我將其名稱更改為cardDatabase.js ，以便 React 不再將其視為組件，而不是接收道具，function 現在具有標准參數。

更新了 cardDatabase.js

import common from './Common';
import rare from './Rare';
import epic from './Epic';
import legendary from './Legendary';


const cardDatabase = (cardRarity, cardLevel) => {

    let filteredArray = [];
    let pushedArray = [];
    let reducedArray = [];

    const array = (rarityOfArray) => {
        filteredArray = rarityOfArray.filter(item => item.key <= cardLevel)

        for(let x = 0; x < filteredArray.length; x++) {
            pushedArray.push(filteredArray[x].cardsRequiredToUpgrade)
            console.log(pushedArray);
        }

        reducedArray = pushedArray.reduce((a, b) => a + b, 0);
        console.log("Reduced - " + reducedArray);

        return reducedArray
    }

    if(cardRarity === "9586") {return array(common)}

    if(cardRarity === "2586") {return array(rare)}

    if(cardRarity === "386") {return array(epic)}

    if(cardRarity === "36") {return array(legendary)}

    if(cardRarity === "")  {return null}
}
export default cardDatabase;

In App.js I removed the <CardDatabase /> component and inside of my calculate method, simply assigned the value of variable w to my cardDatabase function with this.state.cardRarity and this.state.cardLevel as the arguments.

更新了 App.js

import React, {Component} from 'react';

// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

// Components 
import CardRarityDropdown from './components/CardRarityDropdown';
import CardLevelDropdown from './components/CardLevelDropdown';
import CardAmountInput from './components/CardAmountInput';
import CardCalculationsButton from './components/CardCalculationsButton';

//Containers
import cardDatabase from './containers/cardDatabase/cardDatabase.js';

class App extends Component {

  constructor() {
    super();
    this.state = {
      cardRarity: "",
      cardLevel: "",
      amountOfCards: "",
    }
    this.setCardValues = this.setCardValues.bind(this);
  }

  setCardValues = (event) => {
    const {name, value} = event.target

    this.setState({
          [name]: value
    })
  }

  calculate = () => {
    let rarity = this.state.cardRarity;
    let level = this.state.cardLevel;
    console.log("v: " + rarity)

    let w = cardDatabase(rarity, level);
    console.log("w: " + w)

    let x = rarity - w;
    console.log("x: " + x)

    let y = this.state.amountOfCards;
    console.log("y: " + y)

    let z = x - y;
    console.log("z: " + z)

    return z
  }

  render () {
    return (

        <div>
          <h1 id="superCellText">Clash Royale Card Calculator</h1>

          <CardRarityDropdown
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity} />

          <CardLevelDropdown
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity}
            cardLevel={this.state.cardLevel} />

          <CardAmountInput
            setCardValues={this.setCardValues}
            cardRarity={this.state.cardRarity}
            amountOfCards={this.state.amountOfCards} />

          <CardCalculationsButton
            calculate={this.calculate}
            cardRarity={this.state.cardRarity} />
        </div> 
    );
  }
}
export default App;

現在w返回一個數值而不是 object 並且我的應用程序終於可以正常運行了。