如何在`this.state`对象中获取状态值

Posted 2023-02-22

【中文标题】如何在`this.state`对象中获取状态值

【英文标题】：How to get state value inside `this.state` object

【发布时间】：2019-09-04 09:52:06

【问题描述】：

我有一个有状态的 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 这可能吗？有解决办法吗？？

感谢您的帮助！！

【问题讨论】：

从父组件传递 number_rows 或存储在 redux 中。你使用的方式不对。并且您仍然想使用相同的组件，然后尝试使用 componentDidMount 方法。

正如@mfakhrusy 所暗示的那样，我很好奇您希望number_rows 采取何种行动。它是常数还是可以改变？如果可以，这发生在 React 组件的层次结构中的哪个位置？

是的 number_rows 会改变，我不是恒定的

您在初始化之前访问状态。

不，您不能使用它。要么让它成为一个常数，要么使用道具发送它。如果它是动态的，我会两者都做，像这样： .slice(0, props.number_rows ? props.number_rows : NUMBER_ROWS_CONSTANT);

【参考方案1】：

numbers_rows 是常量还是可以更改？

如果它是一个常量，请考虑将其移出您的状态，因为它在技术上不是应用程序的状态。

也许做一些类似的事情

const NUMBERS_ROWS = 30; 在Contracts 组件上方，或者将该变量保存在常量文件中，然后将该变量导入组件。

如果可以改的话。

您可以将数据的初始状态设置为空数组，然后根据您的情况有两种选择。

如果 props.data 是从 API 获取的值，并且该值可以是 null 或空数组（如果仍在进行中），请使用 componentDidUpdate 根据 props.data 之后的值更新您的 data 状态该值已被提取。

如果您非常确定 props.data 不会是 null/空数组并且在组件安装之前已经填充，您可以使用 componentDidMount 设置 data 状态，基本上您只需移动根据您的情况，排序和切片到componentDidMount 或componentDidUpdate 的逻辑。

【讨论】：

30 只是初始默认值，我有一个加载更多行的功能，这会增加 number_rows 状态

感谢@mfakhrusy，这也许是要走的路。感谢大家的投入。

【参考方案2】：

也许您可以先使用默认的行数变量来初始化组件的状态。之后，当您需要更改number_rows 变量时，只需调用alterNumberRows 函数并使用新的number_rows 值计算data，然后使用新计算的number_rows 和@987654326 更新状态@。

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