Question

我正在研究此组件，我想在每次渲染之前验证其字段。如果它们无效，我想禁用父级中的按钮。

这是到目前为止我得到的：

export default function Input(props) {

  const [inputs] = useState(props.inputs);

  const didChangeRef = useRef([]);

  useEffect(() => {
    if (!_.isEqual(didMountRef.current, props.inputs)) {
      validateInput(input);
      didChangeRef.current = props.inputs;
    }
  });

  const validateInput = input => {
     const errors = useValidation(input);
     if(Object.keys(errors).length !== 0) {
       props.setIsValid(false);
     }
  }

 return (
  <input
   onChange={e=> props.setProperty(e)}>
  </input>
  <input
   onChange={e=> props.setProperty(e)}>
  </input>
 )
}

如果输入发生更改，它将在父级中设置一个属性，然后重新呈现此组件。输入是一个对象数组，我希望在每个渲染器（或componentDidMount）上验证其内容。我要么设法使其无限循环，要么只运行一次验证。

感谢您的帮助。

P.S。：

我也尝试了另一种方法，但是最终仍然无限循环：

export default function Input(props) {

  const didMountRef = useRef(true);

  useLayoutEffect(() => {
    if (didMountRef.current) {
      didMountRef.current = false;
      return;
    }
    validate(input);
  });

  const validate = input => {
    // validation...
  }

}

这是父组件：

class CreateShoppingItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      storage: {},
      isValid: true,
    };
  }

  setIsValid = (isValid) => {
    this.setState({ isValid });
  };

  render() {
    return (
      <div>
        <Input setIsValid={this.setIsValid} inputs={this.storage.inputs} />
        <Button disable={!isValid}></Button>
      </div>
    );
  }
}

在每次渲染之前执行验证

0 个答案: