более одного setState в useEffect, как избежать повторного рендеринга?

Question

как избежать повторного рендеринга, когда у меня более одного setState в useEffect? ​​

Я хочу сделать 2 вызова API и установить 3 различных состояния в useEffect (когда компонент монтировался) и только один повторный рендеринг

как то так

useEffect(()=>{
   axios.get('http://localhost:81/api/myapi/')
   .then(res=>{
     setName(res.data['name']);
     setPrice(res.data['price']);
   })

   axios.get('http://localhost:81/api/mysecondapi/')
   .then(res=>{
     setColors(res.data['colors']);
   })
 },[]);

Я хочу только один рендер после всех подходов. я знаю, что это правильно для повторного рендеринга после каждого setStates, но как я могу сделать это, чтобы сделать только один? это хорошо, чтобы поместить все состояния в объекте? как состояние класса?

Answer 1

Если вы не хотите использовать useReducer, можете использовать Promise.all со своими выборками

useEffect(()=>{
   const stateData = {}
   const fetch1 = axios.get('http://localhost:81/api/myapi/')
   const fetch2 = axios.get('http://localhost:81/api/mysecondapi/')
   Promise.all([fetch1, fetch2]).then(([res1,res2])=>{
     setName(res1.data['name']);
     setPrice(res1.data['price']);
     setColors(res2.data['colors']);
   })
 },[]);

Это приведет к 3-кратному повторному рендерингу, но это не то же самое, что 3-кратноеОбновления DOM.

Если вы хотите только один повторный рендеринг, объедините все ваши обновления в один объект:

Promise.all([fetch1, fetch2]).then(([res1, res2]) => {
  setNamePriceColor({ name: res1.data['name'],
    price: res1.data['price'],
    colors: res2.data['colors'] })
})

Answer 2

Вы должны попробовать цепочку обещаний

useEffect(()=> {
   axios.get('http://localhost:81/api/myapi/')
   .then(res => {
     setName(res.data['name']);
     setPrice(res.data['price']);
   })
   .then(() => axios.get('http://localhost:81/api/mysecondapi/'))
   .then(res => {
     setColors(res.data['colors']);
   })

 },[]);

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