Question

我有一个默认值为null的选择菜单当我将道具传递给它时，它将使用新道具作为默认值重新呈现 ps：选择是多的我尝试使用组件将接收道具以及我发现的所有东西，但仍然可以正常工作

这是我的选择组件：

import React, { useState, useEffect } from "react";
 import Select from "react-select";

 class SelectMenu extends React.Component {
 state = {
  defaultValues: [],
  };

 componentWillReceiveProps(newProps) {
  this.setState({ defaultValues: newProps.defaultValue });
  }

  render() {
 return (
  <Select
    options={this.props.options}
    closeMenuOnSelect={this.props.closeMenuOnSelect}
    components={this.props.components}
    isMulti={this.props.isMulti}
    onChange={(e) => this.props.onChange(e, this.props.nameOnState)}
    placeholder={this.props.default}
    defaultValue={this.state.defaultValues}
  />
  );
 }  
 }

 export default SelectMenu;

Answer 1

componentWillReceiveProps在安装过程中不会被调用。

在安装过程中，React不会使用初始道具调用UNSAFE_componentWillReceiveProps（）。仅当某些组件的道具可能会更新时才调用此方法。（https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops）

此外，componentWillReceiveProps已被弃用，并将在React 17中删除。请改而考虑getDerivedStateFromProps，尤其是关于不需要何时需要它的注意事项。

我相信在您的情况下，使用构造函数会非常好，就像这样：

class Components extends React.Component {
   constructor(props) {
      super(props)
      this.state = { some_property: props.defaultValue }
   }
}

Answer 2

我找到了解决这个问题的方法通过使用组件将获得道具并用即将来临的道具设定我的状态并且在渲染中，仅在state.length！== 0

时，才需要执行条件以渲染选择菜单

我发布了这个答案，以防万一有人遇到相同的问题，我知道这不是最理想的解决方案，但对我有用

Answer 3

很抱歉以前的解决方案，但它不是最佳解决方案，我想办法所以代替默认值您必须将其作为价值支柱如果您想捕获已删除和已添加的值作为默认值该功能将帮助您很多

      onChange = (e) => {
   if (e === null) {
   e = [];
    }
     this.setState({
        equipments: e,
  });
  let added = e.filter((elm) => !this.state.equipments.includes(elm));
  if (added[0]) {
  let data = this.state.deletedEquipments.filter(
    (elm) => elm !== added[0].label
  );
   this.setState({
    deletedEquipments: data,
    });
  }

  let Equipments = e.map((elm) => elm.label);
  let newEquipments = Equipments.filter(
    (elm) => !this.state.fixed.includes(elm)
  );
  this.setState({
   newEquipments: newEquipments,
  });

   let difference = this.state.equipments.filter((elm) => !e.includes(elm));
   if (difference.length !== 0) {
   if (
     !this.state.deletedEquipments.includes(difference[0].label) &&
     this.state.fixed.includes(difference[0].label)
     ) {
     this.setState({
         deletedEquipments: [
         ...this.state.deletedEquipments,
           difference[0].label,
         ],
        });
      }
     }


    };

  constructor(props) {
   super(props);
   this.state = {
    equipments: [],
    newEquipments: [],
   deletedEquipments: [],
  };
 }

反应选择默认值

3 个答案: