Реагировать на потерю данных на странице refre sh функция стрелки

Question

Я работаю над динамическим c реагирующим компонентом, который будет показывать профили компаний на основе идентификатора маршрута. В настоящее время я использую пример данных из файла data. js, который просто хранит данные.

Проблема Когда я нажимаю на страницу динамического c, все данные загружаются в первый раз. Затем, когда я ссылаюсь sh, мне выдается ошибка: «не удается прочитать имя свойства undefined», поэтому я предполагаю, что данные не перезагружаются, но я не уверен, как заставить данные оставаться при перезагрузке страницы , Код ниже:

DynamicPage. js

import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'

  const company = () => {
     if(users !== undefined){
       users.find((row) => {
       return match.params.id == row.id
      })?.name
   } else { return null }

  return(
    <div>
      {company.name}
    </div>
  )
}

export default SearchCompany

данные. js

import uuid from 'uuid/v1';

export default [
  {
    id: uuid(),
    name: 'exampleone',
    investors: ['x', 'y', 'z'],
    website: "https://exampleone.com",
  },
  {
    id: uuid(),
    name: 'exampletwo',
    investors: ['n', 'm', 'l'],
    website: "https://exampletwo.com",
  },
  {
    id: uuid(),
    name: 'examplethree',
    investors: ['a', 'b', 'c'],
    website: "https://examplethree.com",
  }
]

Answer 1

if you want to call all data, and the id is equal with someId, <br/>
you must to loop it first. <br/>

import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'
import {useParams} from 'react-router-dom' //if use this to call params

  const theData = data
  const id = useParams()

  const company = () => {
   return (
    theData.map(item =>
     <div>
       Id: {item.find(_item => _item.id === id)?.id}
       Name: {item.find(_item => _item.id === id)?.name}
       Websites: {item.find(_item => _item.id === id)?.website}
     </div>
    ))
   }

//use this
const company2 = () => {
  return (
    <div>
    id: {theData.find(item => item.id === id)?.id}
    Name: {theData.find(item => item.id === id)?.name}
    Website: {theData.find(item => item.id === id)?.website}
    Investors: {theData.find(item => item.id === id)?.investors.map(__item => <div>{__item}</div> ) }
    </div>
  )
}

  return(
    <div>
      {company()}
      {company2()}
    </div>
  )
}

export default SearchCompany

data.js
export default [
  {
    id: uuid(),
    name: 'exampleone',
    investors: ['x', 'y', 'z'],
    website: "https://exampleone.com",
  },
  {
    id: uuid(),
    name: 'exampletwo',
    investors: ['n', 'm', 'l'],
    website: "https://exampletwo.com",
  },
  {
    id: uuid(),
    name: 'examplethree',
    investors: ['a', 'b', 'c'],
    website: "https://examplethree.com",
  }
]

Answer 2

Я думаю, что вы хотите вызывать из состояния, поэтому, если вы создаете состояние с помощью useState, это значит, что вы создаете переменную с ним. вернуться к старому коду.

import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'

const SearchCompany = ({match}) => {

  const [users] = useState(data);

  const company = () => {
    return (
     users.find((row) =>match.params.id === row.id)?.name )
   }

  return(
    <div>
      {company}
    </div>
  )
}

export default SearchCompany

** Обратите внимание, удалены данные. js и добавлены к вопросу

Answer 3

import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'

const SearchCompany = ({match}) => {
  const [users, setUsers] = useState(data);
  const [name, setName] = useState("");

  useEffect(() => {
    if (users) {
      users.find(row => {
        if (match.params.id === row.id) {
          setName(() => row.name);
        }
      });
    }
  }, [match, users]);

  return(
    <div>
      {company.name}
    </div>
  )
}

export default SearchCompany

Answer 4

Вы можете использовать useMemo примерно так:

import React, { useMemo } from 'react';

const company = useMemo(() => users.find((row) => {
    return match.params.id == row.id
  }), [users]);