Question

有没有办法使一个初始状态等于另一个状态的长度？

下面有一个我想实现的示例，其中'options_counter'必须等于options的初始项数的长度，options是状态内的一个数组：

this.state = {
            options: [
                {
                    id: 0,
                    label: 'Industrial Truck and Tractor Operators',
                    value: '53-7051',
                   ,
                    tooltip_text: 'Operate industrial trucks or tractors equipped to move materials around a warehouse, storage yard, factory, construction site, or similar location. Excludes “Logging Equipment Operators" (45-4022).',
                },
                {
                    id: 1,
                    label: 'Order Clerks',
                    value: '43-4151',

                    tooltip_text: 'Receive and process incoming orders for materials, merchandise, classified ads, or services such as repairs, installations, or rental of facilities. Generally receives orders via mail, phone, fax, or other electronic means. Duties include informing customers of receipt, prices, shipping dates, and delays; preparing contracts; and handling complaints. Excludes "Dispatchers, Except Police, Fire, and Ambulance" (43-5032) who both dispatch and take orders for services.',
                },
            ],
            value: null,
            styles: { //container style is working
              marginTop:"2em",
              marginLeft: "2em",
              borderStyle: "solid",
              borderWidth: ".1em",
              borderBottom:"none",
              borderRight: "solid",
              width:"19em",
              textAlign: "justify",
              backgroundColor: "white",
              boxShadow: "3px 6px 5px #9E9E9E"
            },

            options_counter: this.state.options.length,

        };

Answer 1

这可能有效。看看Javascript中的getter方法：https://www.w3schools.com/js/js_object_accessors.asp

this.state = {
    options: initialOptions || [],
    get optionsCount() {
        return this.options.length;
    }
}

并使用它：

const { optionsCount } = this.state;

Answer 2

我将直接使用一个函数：

this.state = {
            options: [
                {
                    id: 0,
                    label: 'Industrial Truck and Tractor Operators',
                    value: '53-7051',
                    tooltip_text: 'Operate industrial trucks or tractors equipped to move materials around a warehouse, storage yard, factory, construction site, or similar location. Excludes “Logging Equipment Operators" (45-4022).',
                },
                {
                    id: 1,
                    label: 'Order Clerks',
                    value: '43-4151',

                    tooltip_text: 'Receive and process incoming orders for materials, merchandise, classified ads, or services such as repairs, installations, or rental of facilities. Generally receives orders via mail, phone, fax, or other electronic means. Duties include informing customers of receipt, prices, shipping dates, and delays; preparing contracts; and handling complaints. Excludes "Dispatchers, Except Police, Fire, and Ambulance" (43-5032) who both dispatch and take orders for services.',
                },
            ],
            value: null,
            styles: { 
              marginTop:"2em",
              marginLeft: "2em",
              borderStyle: "solid",
              borderWidth: ".1em",
              borderBottom:"none",
              borderRight: "solid",
              width:"19em",
              textAlign: "justify",
              backgroundColor: "white",
              boxShadow: "3px 6px 5px #9E9E9E"
            },

            options_counter: () => this.state.options.length,

        };
        
console.log(
    this.state.options_counter()
);

Answer 3

为此功能使用componentDidMount（）。
呈现组件后，将调用componentDidMount（）方法。
因此，在开始使用之前，它总是会正确设置状态。

constructor(props){
    super(props);
    this.state = {
        options_counter: 0
    };
}

然后，在componentDidMount（）中将此初始值更改为0

componentDidMount(){
  this.setState({
    options_counter: this.state.options.length
  });
}

在此处了解更多信息：Reactjs Lifecycle: componentDidMount()

Answer 4

我最初可以在要渲染的组件内部进行设置：

<div onLoad={()=>{this.props.setProps({options_counter:this.props.options.length})}} style={this.props.styles}>

将初始状态设置为其他状态/属性

4 个答案: