Question

代码结构：

我有一个具有错误状态的可重用功能组件。

const InputContainer = (props) => {
  const [error, setError] = useState(false)

  const handleChange = (e) => {
    const errorMsg = validate(e.target.value, props.maxLength) // more complex validation
    if (errorMsg) {
      setError(errorMsg)
    }
    props.onChange(e, errorMsg);
  }

  return (
    <div>
      <Input onChange={handleChange} value={props.value} /> 
      <span>{error} </span>
    </div>
  )
}

在具有多个InputContainer的父组件中，在满足某些必要条件时，将触发API调用以获取一些必要信息，这些信息将在父状态下应用

const ParentComponent = (props) => {
  const [userId, setUserId] = useState(props.userId);
  const [age, setAge] = useState(props.age);

  if (age > 20) {
    fetchData(userId).then((ageValue) => {
      setAge(ageValue);
    });
  }

  return (
    <div>
      <InputContainer onChange={(e, errorMsg) => setUserId(e)} value={userId} maxLength={5}/>
      <InputContainer onChange={(e, errorMsg) => setAge(e)} value={age} />
    </div>
  );
};

问题：

请考虑以下情况：首先输入InputContainer（年龄）并进入错误状态，然后在填充UserId字段时，API调用获取了年龄并填充了数据，但未转换错误状态。

试用

尝试在useEffect内的[value]上实现InputContainer钩子并验证value字段，默认情况下将是null或0进入错误状态

道具更改时触发子状态更改

0 个答案: