В первом рендеринге он показывает "неопределенный", а во втором рендеринге он показывает "данные" в React.js

#javascript #reactjs

Вопрос:

Моя проблема в том, что когда я отправляю массив данных в качестве реквизита и консоли.войдите в другой компонент , он сначала показывает «неопределенный», а затем показывает данные. Я получаю данные из API, а затем отправляю их в качестве поддержки другому компоненту. Я уже удалил React.StrictMode из index.js файл, но это все равно продолжает происходить.

например :

 const menu = [ {name : "firstFood"},{name:"Second Food"} ]

lt;MenuTable menu ={menu} /gt;

и в другом компоненте я консолью.запишите это в журнал.

 const MenuTable = (props)=gt;{ console.log(props.menu) }

При первом рендеринге он показывает неопределенное затем он показывает данные

1. Если вы получаете его из API, то при первоначальном рендеринге он еще не будет определен

2. тогда в чем же его решение?

3. Вы можете использовать условный рендеринг, что-то вроде: data ? lt;MyComponent data={data} /gt; : lt;divgt;Loading...lt;/divgt;

4. спасибо, это сработало

Ответ №1:

Я думаю, ты написал:

 const [menu, setMenu] = useState()

Затем вы вызываете api и setMenu(response) получаете ответ с данными. Поэтому menu , во-первых, есть undefined . Вы должны попробовать useState([]) , тогда первый рендер меню будет [] .