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

ProgramBox

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

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#javascript #reactjs #object #state

#javascript #reactjs #объект #состояние

Вопрос:

У меня есть реагирующий компонент с отслеживанием состояния, и я хочу получить доступ к значению формы состояния внутри объекта состояния, в частности 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 возможно ли это вообще? Есть ли обходной путь??

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

1. передайте number_rows из родительского компонента или сохраните в redux. способ, который вы используете, неправильный. и все же вы хотите использовать тот же компонент, затем попробуйте использовать метод componentDidMount.

2. Как намекал @mfakhrusy, мне любопытно, как вы ожидаете number_rows действовать. Это константа или ее можно изменить? Если это возможно, где в иерархии компонентов React это происходит?

3. Да number_rows , изменится, я не постоянный

4. вы получаете доступ к состоянию до его инициализации.

5. Нет, вы не можете его использовать. Либо сделайте его константой, либо отправьте его с помощью реквизита. Я бы сделал и то, и другое, если оно динамическое, что-то вроде этого: .slice (0, props.number_rows? props.number_rows : NUMBER_ROWS_CONSTANT);

Ответ №1:

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

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

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

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

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

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

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

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

1. 30 — это только начальное значение по умолчанию, у меня есть функция для загрузки большего количества строк, что увеличивает состояние number_rows

2. Спасибо @mfakhrusy, возможно, это правильный путь. Спасибо всем за вклад.

Ответ №2:

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

 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 (
            ...
        );
    }
}