React with Hooks 中的双向数据绑定

Question

我正在使用 React 构建一个应用程序，其中两个组件应该能够相互更改状态：

组件 A ->组件 B

组件 B ->组件 A

组件 A 是一组按钮，组件 B 是输入元素。

我设法让它只以一种方式工作，A -> B 或只是 B -> A，但不能让它同时工作。它部分适用于使用 useEffect 钩子，但有错误，我认为这真的很愚蠢。

我已经读过很多 React 不能以这种方式工作的信息，但是是否有任何迂回交叉路口如何使其工作？我的应用程序确实需要这种 2 路数据绑定。

感谢您的任何帮助！

按钮的状态位于自定义上下文挂钩(useStateContext(作为数组的数字变量中。

import { useStateContext } from "components/StateProvider/Context"; 
import { useState, useEffect } from "react";
import { baseConvert } from "utility/baseConvert";
const NumberInput = () => {
const [ { digits, baseIn, baseOut }, dispatch ] = useStateContext();
const convertedValue = baseConvert({
digits,
baseIn,
baseOut
});
const [ inputValue, setInputValue ] = useState(convertedValue);
/* useEffect(() => {
setInputValue(convertedValue)
}, [ digits, baseIn, baseOut ]) */
const regex = /^[A-Zd]+$/;
const handleInput = ({ target: { value }}) => {
if (value === "") setInputValue(0);
console.log(value);
if (regex.test(value)) {
setInputValue(value);
dispatch({
type: "setDigits",
digits: baseConvert({
digits: value.split("").map(Number),
baseIn: baseOut,
baseOut: baseIn
})
})
}    
};
return (
<input type="text" onChange={handleInput} value={inputValue} />
);
};
export default NumberInput;

Answer 1

组件不应直接操作其他组件的状态。如果需要共享数据，请将状态引入父组件，并将回调传递给可以更改状态的子组件。

例如：

function ParentComponent() {
const [currentVal, setCurrentVal] = useState(0);
return
<>
<Child1 value={currentVal} onChange={setCurrentVal}/>   // you might also pass a function that does some other logic and then calls setCurrentVal
<Child2 value={currentVal} onChange={setCurrentVal}/>
</>
}

Answer 2

@Jeff Storey 解决方案似乎有点错误。第一个索引是值，第二个索引是更新值的函数。

它应该是：

const [currentVal, setCurrentVal] = useState(0);