Двухстороннее связывание данных в React с хуками

Question

Я создаю приложение с React, где два компонента должны иметь возможность изменять состояние друг друга:

Компонент A -> Компонент B

Компонент B -> Компонент A

Компонент A - это набор кнопок, а Компонент B - элемент ввода.

Мне удалось заставить его работать только одним способом, A -> B или просто B -> A, но я могу не заставит это работать оба. Это работает частично с использованием ловушки useEffect, но с ошибками, и это, на мой взгляд, действительно глупая идея.

Я много читал, что React не работает таким образом, но есть ли какие-то обходные пути, как это можно ли заставить его работать? Мне действительно нужно это двухстороннее связывание данных для моего приложения.

Спасибо за любую помощь!

Состояние кнопок находится в переменной digits из пользовательского контекстного хука ( 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-Z\d]+$/;

  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 [setCurrentVal, currentVal] = 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}/>
   </>
}