Блог

Главная - Вопросы по программированию - установка вложенного объекта в состояние — React JS

установка вложенного объекта в состояние — React JS

#javascript #node.js #reactjs #react-redux #react-hooks

Вопрос:

Вот мой код:

Реагировать на код JS:

 class Item extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            product: [
                {
                    id: 0,
                    name: "Name",
                    price: "Quantity",

                    productIngredient: {
                        id: 0,
                        name: "Ingredient Name",
                        unit: "Unit(s)",
                        quantity: "Quantity",
                    },
                                        
                },
            ],  
        };
    }
}

export default Item;

Мой Вопрос:

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

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

1. Какое отношение бэкэнд Java имеет к настройке состояния в react?

Ответ №1:

Я обычно делаю это с чем-то вроде:

 setProductIngredient = ( productIngredient, ix ) => {
  const { product } = this.state
  product[ ix ].productIngredient = productIngredient
  this.setState( { product } )
}

Если у вас нет индекса, вы можете использовать методы поиска или индексирования, чтобы получить правильный элемент массива.

Ответ №2:

Hy, если вы хотите получить и заполнить свое состояние с помощью вызова api, вам нужно использовать componentdidmount() https://reactjs.org/docs/react-component.html#componentdidmount.

Я рекомендую вам использовать последнюю версию React с крючками (это проще в использовании). Если вы используете хуки, вам необходимо использовать функцию useEffect (), чтобы выполнить вызов api. Внутри этой функции вы можете заполнить свой хук useState. Док слушает.

Вот полный пример вызова api внутри функции useEffect(). Пример здесь.

Метки: