ReactJs: родительский или дочерний компонент, отвечающий за обработку данных для отображения?

avatar
calveeen
9 августа 2021 в 02:46
115
1
0

Я только начинаю изучать ReactJS. Я хотел бы знать, что лучше, учитывая сценарий: родительский компонент делает запрос GET на какой-то сервер, возвращая объект JSON. Я хочу передать эти атрибуты дочернему компоненту. Однако не все атрибуты JSON могут отображаться непосредственно в представлении дочернего компонента (т. е. я не могу использовать props.XXX в дочернем компоненте). Либо родительский компонент запускает код предварительной обработки, чтобы правильно упаковать данные для дочернего компонента, либо дочерний компонент выполняет предварительную обработку до того, как отобразит собственное представление.

Должен ли родительский или дочерний компонент запускать код предварительной обработки?

Источник
Abrah_dago_313
9 августа 2021 в 02:56
0

Все, что вы сделали, хорошо, но я не знаю, используете ли вы компонент класса или функциональный компонент? И когда вы получили JSON, вы сохранили его в состоянии родителя или как? Вам нужно поместить данные json в состояние, но лучший вариант — использовать избыточность. redux.js.org/introduction/getting-started, react-redux.js.org/introduction/getting-started

calveeen
9 августа 2021 в 03:00
0

Я использую функциональный компонент как для родителя, так и для ребенка. Но я понял одну вещь. Если я помещу функцию обработки в дочерний компонент, функция будет вызываться до того, как данные будут получены, потому что хук UseEffect для извлечения данных запускается после метода render в родительском компоненте.

Ответы (1)

avatar
Alex Mckay
9 августа 2021 в 03:07
1

Я бы поспорил с родителем.

const Logic = () => {
  const [data, setData] = useState([])
  useEffect(() => {
    axios.get(...).then(setData).catch(...)
  }, [])
  return <View data={data.map((item) => ({...item, title: item.title.toUpperCase()})} />
}

const View = ({data}) => (
  <>
    {data.map(item => <div>{item.title</div>)}
  </>
)
calveeen
9 августа 2021 в 03:32
0

{data.map(transformData)} преобразует данные в родительском компоненте. почему вам нужно снова вызывать {data.map(item => ...} в компоненте View?

Alex Mckay
9 августа 2021 в 05:13
0

Вы можете преобразовать данные в компоненте Logic, но вам все равно придется сопоставлять данные в дочернем компоненте, если вы конвертируете список в серию элементов html.