Question

我在React中有一个Parent and Child组件的情况。许多子组件将被实例化，我需要父组件跟踪它们的状态，以便当所有子组件都处于“通过”状态时，继续按钮将不再被禁用。

在这里我实例化我的父状态数组，并在另一个数组中为每个步骤定义文本。

const [stepsArray, setStepsArray] = useState([]);

const steps = [
 "step1",
 "step2",
 "step3"
]

我正在将一个函数传递给Child组件，该组件将在useEffect的渲染中调用。

useEffect( () => {
    const passFailObject:IPassFailObject = {
        name: props.name,
        passed,
        failed
    }
    props.updateParentArray(passFailObject);
}, []);

那么父函数是：

const getChildState = (object:IPassFailObject):void => {
     setSteps([...stepsArray, object]);
}

在这里我实例化子组件：

<ol>
    {steps.map( step => <li key={step}><PassFailStep updateParentArray={getChildState} name={step} /></li>)}
</ol>

似乎每次调用getChildState函数更新状态数组时，它都没有更新。我猜这是因为父组件尚未离开其返回调用，但我不确定。

我想我可以使用useRef来解决这个问题，而只需推送到该引用数组即可，但是我想知道是否有更好的方法来完成我正在做的事情。

从挂钩函数的返回中添加到React状态数组

0 个答案: