Блог

Главная - Вопросы по программированию - почему состояние не инициализируется заданным значением?

почему состояние не инициализируется заданным значением?

#html #reactjs #web #react-hooks

#HTML #reactjs #веб #реагирующие хуки

Вопрос:

последнее значение поступает из реквизита, но когда оно добавляется в качестве начального значения для состояния, оно не отображается.

введите описание изображения здесь

  import React, { useRef, useState } from "react";
 //import config from "../../../../../../config";
 //import { getAuthToken } from "../../../../../utils/auth";
 import styles from "./ContentRowPrice.module.css";

 const ContentRowPrice = (props) => {
   const [priceInput, setPriceInput] = useState(props.price);
   // const priceInput = useRef();

   // const handleBlur = () => {
   //   const price = parseFloat(priceInput.current.value);
   //   if (props.price === price) {
   //   } else {
   //     props.onPaywallChange(price);
   //   }
   // };

    const classes = styles["contentrowprice-input"];
    return (
      <>
        <span>{props.price}</span>
        <span>{priceInput}</span>
        <input
          id={`paywall_${props.price}_${props.id}`}
          type="number"
          min="0"
          step="0.01"
          // ref={priceInput}
          // defaultValue={props.price}
          value={priceInput}
          className={classes}
          // onBlur={handleBlur}
        />
    </>
  );
};
export default ContentRowPrice;

одна вещь, которую я понял, что значение 10 на самом деле поступает из ввода, который ранее был на месте указанного выше ввода.

введите описание изображения здесь

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

1. Можете ли вы поделиться тем, что представляет собой рендеринг ContentRowPrice и передачу price значения prop? Я подозреваю, что в игре присутствует некоторая асинхронная логика, и price это не то значение, которое вы ожидаете при ContentRowPrice монтировании компонента. Можете ли вы также уточнить, что именно означает «не отображается»?

2. Это также обычно считается антишаблоном в React для хранения переданных реквизитов в локальном состоянии. Можете ли вы объяснить вариант использования?

3. да, я только что понял, что мне не нужно локальное состояние, если я передаю реквизиты. Прошу прощения за это.

Ответ №1:

Первый рендеринг компонента React выполняется с пустыми значениями, это момент, когда компонент react создает компонент и состояние с useState помощью hook .

Когда вы назначаете его useState , оно не изменится во втором (или более позднем) повторном рендеринге без useEffect перехвата.

   useEffect(() => {
   setPriceInput(props.price);
  }, [props.price]);

Подробнее об этой проблеме вы можете прочитать здесь:
https://medium.com/@digruby/do-not-use-props-as-default-value-of-react-usestate-directly-818ee192f454

Метки: