React-select 默认值

Question

我有一个 select 菜单，默认值为空当我将 props 传递给它时，它会重新渲染新的 props 作为默认值 ps : select 是 multi 我尝试使用 component will recieve props 和我发现但仍然有效的所有东西

这是我的 select 组件：

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 doesn’t call UNSAFE_componentWillReceiveProps() with initial props during mounting. It only calls this method if some of component’s props may update. (https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)

此外，componentWillReceiveProps 已弃用，将在 React 17 中删除。请查看 getDerivedStateFromProps，尤其是关于何时 不 [=23] 的注释=]需要它。

我相信在您的情况下使用构造函数会非常好，例如：

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

Answer 2

我找到了这个问题的解决方案通过使用组件将收到道具并使用即将到来的道具设置我的状态并且在渲染中你需要做条件来渲染 select 菜单只有当 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: [],
  };
 }

React-select 默认值

React-select defaultValues

javascript

reactjs

react-select