Сопоставление данных с помощью useRef Hook - PullRequest
Новая
       31

Сопоставление данных с помощью useRef Hook

0 голосов
/ 17 июня 2020

Я следую этому: Объединить два JSON данных в один с определенными значениями ключей

Теперь я добавил хук useEffect(). Как я могу использовать useRef для хранения моего результата? Это асинхронная функция. 

const App = (props) =>{
    let result = useRef ()
    useEffect(()=>{
      return()=>
        (result.current = [courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, 
        {[c.court_id] : q[i].color}))))
      }.[someTrigger])
   return(
        <ul>
           {result.current.map(r => (
           <li>
             Court id - {r.court_id} | Ball colour - {r.color}
           </li>
      ))}
    </ul>
)
}

Теперь мои {r.court_id} и {r.color} пусты.

Вещи, которые я пробовал: 

const App = (props) =>{
       [result, setResult] = useState({})
        useEffect(()=>{
          setResult([courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, 
            {[c.court_id] : q[i].color}))))
          }))
       return(
            <ul>
               {result.map(r => (
               <li>
                 Court id - {r.court_id} | Ball colour - {r.color}
               </li>
          ))}
        </ul>
)
}

ошибка: TypeError: result.map is not a function

Ответы [ 2 ]

1 голос
/ 17 июня 2020

В соответствии с вашим оператором рендеринга разрешите данные, как показано ниже

Если вы выберете вариант useState 

 useEffect(() => {
    const final = [courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, c, {color: q[i].color})));
    setResult(final);
  }, []);

Пример https://codesandbox.io/s/react-hooks-usestate-shz9v

0 голосов
/ 17 июня 2020

useEffect hook выполняется после монтирования компонента, а useRef - для доступа к некоторому компоненту dom.

Я думаю, что вам нужно useState. 

const [result, setResult] = useState({});
...