将初始状态设置为另一个 state/prop

Question

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

我在下面有一个我想要实现的示例，其中 'options_counter' 需要等于选项中初始项目数的长度，它是状态中的一个数组：

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}>

将初始状态设置为另一个 state/prop

set initial state to another state/prop

reactjs

react-props

react-state