Как получить значение состояния внутри объекта this.state

Question

У меня есть компонент React с состоянием, и я хочу получить доступ к значению формы состояния внутри объекта состояния, в частности number_rows.

class Contracts extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      number_rows: 30, //starting default
      data: props.data
        .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
        .slice(0, this.state.number_rows)
    };
  }
  render(){
    return(
      ...
    )
  }
}
export default Contracts;

Я не могу получить slice(), чтобы прочитать количество строк, установленное в this.state.number_rows

пример

b={a:'a', c:b.a}
{a: "a", c: "a"}

Я пробовал state.number_rows и this.number_rows Возможно ли это вообще? Есть ли работа вокруг ??

Спасибо за вашу помощь !!

Answer 1

numbers_rows является константой или может быть изменено?

Если это константа, рассмотрите возможность ее перемещения из вашего состояния, поскольку технически это не состояние приложения.

Возможно, сделать что-то вроде

const NUMBERS_ROWS = 30; над компонентом Contracts или сохраните эту переменную в файле (файлах) констант и импортируйте эту переменную в компонент.

Если это можно изменить.

Вы можете сделать исходное состояние данных пустым массивом, тогда у вас есть 2 варианта в зависимости от ваших обстоятельств.

Если props.data является извлеченным значением из API, и значение может быть либо пустым, либо пустым массивом, если извлечение еще продолжается, используйте componentDidUpdate, чтобы обновить состояние data в соответствии со значением props.data после значение уже получено.

Если вы уверены, что props.data не будет нулевым / пустым массивом и уже заполнен до монтирования компонента, вы можете использовать componentDidMount для установки состояния data, в основном вы просто перемещаете логика сортировки и нарезки на componentDidMount или componentDidUpdate в зависимости от ваших обстоятельств.

Answer 2

Возможно, вы можете использовать переменную по умолчанию для числовых строк, чтобы сначала инициализировать состояние вашего компонента. После этого, когда вам нужно изменить переменную number_rows, просто вызовите функцию alterNumberRows и вычислите data, используя новое значение number_rows, а затем обновите состояние с помощью только что вычисленных number_rows и * 1006. *.

class Contracts extends React.Component {
    constructor(props) {
        super(props);

        const DEFAULT_NUMBER_ROWS = 30;

        this.state = {
            number_rows: DEFAULT_NUMBER_ROWS, // starting default
            data: props.data
                .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
                .slice(0, DEFAULT_NUMBER_ROWS),
        };
    }

    alterNumberRows = () => {
        // calculate the new number_rows
        // I just add one to the previous number_rows for simplicity
        const number_rows = this.state.number_rows + 1;

        // use the newly calculated number_rows to slice a new data array
        const data = this.props.data
            .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
            .slice(0, number_rows);

        this.setState({
            number_rows,
            data,
        });
    }

    render() {
        return (
            ...
        );
    }
}