如何在"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是常量还是可以更改？

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

也许做类似的事情

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

如果可以更改。

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

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

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

Answer 2

也许您可以使用默认的行数变量先初始化组件的状态。之后，当你需要更改number_rows变量时，只需调用alterNumberRows函数并使用新的number_rows值计算data，然后使用新计算的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 (
...
);
}
}