Блог

Главная - Вопросы по программированию - Как передавать состояния компонентам в React без того, чтобы каждое переданное состояние было одной и той же ссылкой

Как передавать состояния компонентам в React без того, чтобы каждое переданное состояние было одной и той же ссылкой

#javascript #reactjs #use-state

#javascript #reactjs #use-state

Вопрос:

Я пытаюсь передать состояния нескольким компонентам через счетчик щелчков. Итак, я могу щелкнуть счетчик, который увеличивает значение состояния счетчика, и если я остановлюсь, скажем, на 10 и отправлю его компоненту, я хочу, чтобы в следующий раз, когда я использую счетчик и устанавливаю его на 15 на этот раз, мне нужно, чтобы он отправлял его другому компоненту (или тому же самому) но теперь количество состояний равно 15. Я не хочу, чтобы для обоих экземпляров состояния было установлено значение 15. Каждое состояние должно сохранять свои номера.

JSX

 <div className="addnum" onClick={() => addUnits()}> </div>

JS

 const [units,setUnits] = useState(0)
function addUnits() {
    setUnits(prev => prev 1)
}

Некоторый компонент 1

 <div>{units}</div>

Некоторый компонент 2

 <div>{units}</div>

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

Я видел этот пост, который отвечает на вопрос при использовании компонентов на основе классов, но мое состояние не является массивом, так как я могу сделать то же самое здесь? https://stackdev.io/question/434/copy-the-state-in-react-without-reference

Комментарии:

1. В каждом компоненте вы можете сохранить его в значении

2. Что? Не могли бы вы объяснить, что вы имеете в виду? В идеале с примером

Ответ №1:

Насколько я понимаю. У вас есть список счетчиков и список так называемых некоторых компонентов. Итак, простой структурой данных в таком случае является array . Кроме того, таймер необходим для создания нового слота после некоторого простоя. useReducer является предпочтительным способом обработки нескалярного состояния. Что-то вроде следующего:

 const initialState = [0];

function reducer(state, action) {
  const [head, ...tail] = state;
  switch (action.type) {
    case 'inc':
      return [head   1, ...tail];
    case 'new':
      return [0, ...state];
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const timer = useRef(null);
  const inc = useCallback(() => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => dispatch({type: 'new'}), 1000);
    dispatch({type: 'inc'});
  }, [timer, dispatch]);
  useEffect(() => () => {
    if (timer.current) clearTimeout(timer.current);
  });
  return (
    <>
      {state.map((count, i) => <div key={i}>{count}</div>)}
      <button onClick={inc}> </button>
    </>
  );
}