javascript - 如何返回 React 容器的数值而不是对象？

Question

我正在尝试学习 React，并且正在开发一个简单的网络应用程序来实现我迄今为止在网上学到的东西。

我有一个容器CardDatabase.js，它返回的只是一个值。这个值被调用reduceArray，它是一个已经调用了该方法的数组reduce()。当我渲染时<CardDatabase.js />，值会按预期出现在浏览器和控制台中（在屏幕截图中，它是 86）。但是，当我尝试将 的值分配给in 方法内的<CardDatabase />变量时，将返回一个对象而不是数值（检查屏幕截图中的控制台）。 wcalculateApp.js

如何将 的数值分配给<CardDatabase />变量，以便我可以使用它来计算一些简单的数学？

我也尝试使用道具，this.state但根据我得到的控制台错误和 React 文档，我们不能修改道具的值？所以当我尝试类似的事情时：

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;

标签： javascriptreactjs

Answer 1

Reddit 和 Discord 上的人们给了我相同的反馈，如果该组件没有返回任何与 UI 相关的内容，我不应该使用该组件。因此，CardDatabase.js不应该是一个组件，而是一个简单的函数。

我将其名称更改为，cardDatabase.js以便 React 不再将其视为组件，而不是接收道具，该函数现在具有标准参数。

更新了 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;

在App.js我删除了<CardDatabase />组件和我的calculate方法内部，只需将变量的值分配w给我的cardDatabase函数，并使用this.state.cardRarity和this.state.cardLevel作为参数。

更新了 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返回一个数值而不是一个对象，我的应用程序终于可以正常运行了。