Переменная передается как свойство, не отображаемое в реакции - PullRequest
Новая
       16

Переменная передается как свойство, не отображаемое в реакции

1 голос
/ 19 июня 2020

Новое реагирование, и я предполагаю, что это будет легкий вопрос для кого-то, но я не могу найти конкретный c вопрос, который отвечает на эту проблему. Я сделал учебник по реагированию, а потом решил проверить себя, добавив на веб-страницу еще несколько функциональных кнопок. Во-первых, веб-страница выглядит так: enter image description here

Я хочу отобразить общее количество всех счетчиков (размер массива может различаться et c) рядом с общим количеством. В настоящее время я делаю это так: Во-первых, мой компонент навигационной панели: 

const NavBar = ({ totalCounters }, { totalCount }) => {
  return (
    <nav className="navbar navbar-light bg-light">
      <a className="navbar-brand" href="www.thisisirellevant.com">
        Navbar{" "}
        <span className="badge badge-pill badge-secondary">
          # of Nonzero Counters: {totalCounters}
        </span>
        <span className="badge badge-pill badge-secondary m-2">
          Total Count: {totalCount}
        </span>
      </a>
    </nav>
  );
};

И теперь, как я визуализирую это в родительском элементе: 

const sum = this.sumValues();
    return (
      <React.Fragment>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length} //this is a little different becuase we made it a functional component (it only raises events)
          totalCount={sum}
        />

(Не отображается весь фрагмент, фрагмент в конце концов закрывается) И, наконец, функция суммы, которую я создал в классе App: 

sumValues() {
    var sum = 0;
    var counter;
    for (counter in this.state.counters) {
      sum += counter["value"];
    }
    return sum;
  }

Может ли кто-нибудь сказать мне, почему не отображается общий счетчик? Я чувствую, что передаю все правильно и возвращаю целое число из функции суммы, но, как вы можете видеть на изображении выше, на его месте ничего не отображается. Любые советы будут оценены, извините за такой вопрос новичка. Спасибо всем!

1 Ответ

1 голос
/ 19 июня 2020

Помимо очевидной ошибки ({ totalCounters }, { totalCount }) в компоненте NavBar, я бы предложил использовать for of l oop при вычислении суммы.

Пример 

const { Component, useState, useEffect } = React;

const NavBar = ({ totalCounters, totalCount, isComputing }) => {
  return <div>
    <div>Counters: {totalCounters}</div>
    {isComputing ? <div>Computing count...</div> : <div>Count: {totalCount}</div>}
  </div>
}
 
class App extends Component {
  constructor(props) {
    super(props);
    this.sumValues = this.sumValues.bind(this);
    
    this.state = {
      count: -1,
      isComputing: true,
      counters: Array(Math.floor(Math.random() * 10)).fill(0).map((pr, index) => ({value: index}))
    }
    this.mounted = false;
  }
  
  componentDidMount() {
    this.mounted = true;
    setTimeout(() => {
      
      const count = this.sumValues();
      const isComputing = false;
      if(this.mounted) {
        this.setState(state => ({...state, count, isComputing}))
      }
    }, 300);
  }
  
  componentWillUnmount() {
    this.mounted = false;
  }
  
  sumValues() {
    let sum = 0;
    const { counters } = this.state;
    
    for (let { value } of counters) {
      sum += value;
    }
    return sum;
  }

  render() {
    const { counters, count, isComputing } = this.state;
  
    return <div>
       <NavBar
            totalCounters={counters.filter((c) => c.value > 0).length}
            totalCount={count}
            isComputing={isComputing}
          />
    </div>
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

В идеале вы должны добавить еще одно состояние count, в котором можно сохранить ваши вычисления.

...