Блог

У меня есть два компонента: еда и ингредиент. Ингредиент всегда является дочерним элементом Meal . Я передаю приведенную ниже функцию каждому ингредиенту в качестве реквизита, например <Ingredient deleteIngFunc={handleDeleteIng} /> .

При нажатии кнопки в ингредиенте срабатывает prop.deleteIngFunc ингредиент, но когда я console.debug ingsArrayCopy из функции, он пуст! Оно не должно быть пустым, потому что состояние явно присутствует при рендеринге страницы (т. Е. Ингредиенты отображаются на странице, поэтому состояние явно не пустое)

Meal.js

 import React, {useState, useEffect} from 'react';
import Ingredient from './Ingredient';

function Meal(props){
    const [ingArray, setIngArray] = useState([]);

    function handleDeleteIng(e){
        let ingsArrayCopy = [...ingArray];
        console.debug(ingsArrayCopy); // empty array??
    }

    async function initIngs(){
        let ings = props.ings.map(
            ing => (
                <Ingredient title={ing.title} id={ing.id} deleteIngFunc={handleDeleteIng} />
            )
        )

        return await setIngArray(prev => ings)
    }

    function updateIngs(newIngObject){
        let oldIngState = [...ingArray];

        let newIng = <Ingredient key={newIngObject.id} id={newIngObject.id} title={newIngObject.title} />

        let newIngState = oldIngState.concat([newIng]);

        setIngArray(prev => newIngState);
    }


    useEffect(
        () => {
            initIngs();
        },
        []
    );

    return (
        <ul>
            {ingArray}
        </ul>
    );
}

export default Meal;
  

Ingredient.js

 import React, {useState, useEffect} from 'react';
import CancelIcon from '@material-ui/icons/Cancel';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';

function Ingredient(props){

    function handleDeletion(e){
        e.preventDefault()
        props.deleteIngFunc(e)
    }

    return (
        <li
            key={props.id}
            className="ingredient-listitem"
        >
            <Typography className="ingredient-text">{props.title}</Typography>

            <IconButton onClick={handleDeletion}>
                <CancelIcon></CancelIcon>
            </IconButton>
        </li>
    )
}

export default Ingredient;
  

Нет, значение состояния не может быть доступно внутри обычной функции. Доступ к нему возможен только через следующие перехватчики реакции useEffect() useCallback() useMemo() и return инструкцию вашего функционального компонента.

Например:

 function App() {
  const [state, setState] = useState('initial Value')

  function someFunction(){
    // It's not recommended to access the state inside of this function
    // cause the value of the state will always be ('initial Value')
    // even if the state were updated
    console.log(state)
   // Why ?
   // Because regular function like this cannot have dependency array
   // And thus without dependency array function will not know that state has changed
  }

  useEffect(()=>{
    // It's good if you access the value of the state here
    // It will be assured it will always have the updated value
    console.log(state)
  },[state]) 


  return (
    // You can also access the value of the state inside return statement        
    <>
    {console.log(state)}
    <SomeComponent props={state}/>
    </>
  )
}
  

Дополнительно: вы можете установить состояние для обычной функции, но вы не можете получить доступ или прочитать состояние для обычной функции

Я включил ссылку codesandbox для демонстрации, специфичной для вашей проблемы

https://codesandbox.io/s/accessingstate-03hud?file=/src/App.js