如何返回 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 并且我的应用程序终于可以正常运行了。