Передача аргументов в компоненты React JS

Question

в Main.jsx задана переменная через useState()

const[foo, setFoo] = useState([])

Дальше я передаю сеттер в Component1.jsx, а саму переменную в Component2.jsx, в нем я отрисовываю на основе полученного массива разметку.

По какой то причине когда я обновляю переменную через сеттер который я передал в первый компонент, я не получаю информацию о обновлении переменной во втором компоненте и моя разметка не ререндерится, хотя другие переменные работают по такому же принципу, не могу понять в чем может быть проблема, потому что другие переменные по такому же принципу у меня работают

Main.jsx

function Main() {
    const[foo, setFoo] = useState([])

    return (
    <>
        <div className="Main">
            <Component1  setFoo={setFoo}/>
            <Component2 foo={foo}/>
        </div>
    </>
    );
}

export default Main;

Component1.jsx

function Component1({setFoo}) {
    setFoo([{id: 5}, {id: 8}])
    return (
    <>
        <div className="Component1">
            
        </div>
    </>
    );
 export default Component1

Component2.jsx

function Component2({foo}) {
    console.log(foo) // Этот код срабатывает только при первой загрузке и после перерендера (когда обновляешь код, сюда доходит новая переменная)
    return (
    <>
        <div className="Component2">
            {foo.map(card =>{
                return(
                    <div>
                       {card.id}
                    </div>
                )})
             }
        </div>
    </>
    );
}

export default Component2

Answer 1

Нельзя изменять переменную с useState напрямую(хотел изменить переменную через push и потом ее же передать в сеттер), после этого не происходит перерендера

Answer 2

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

Если все сделать нормально - все будет рендериться. В твоих кусках кода, что ты привел, не особо понятно что ты там делаешь...

//
function Main() {
    const[foo, setFoo] = React.useState([])

    return (
      <div className="Main">
          <Component1 setFoo={setFoo} />
          <Component2 foo={foo} />
      </div>
    );
}
//
function Component1({setFoo}) {
  const action = _ => setFoo(old => [...old, {id: Math.random()}])
  return (
    <div className="Component1">
      <button onClick={action}>Добавить</button>
    </div>
  );
}
//
function Component2({foo}) {
    return (
        <div className="Component2">
            {foo.map(card => <div key={card.id}>{card.id}</div>)}
        </div>
    );
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<Main />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Передача аргументов в компоненты React JS

Ответы (2 шт):