Каков наилучший способ инициализации состояния реагирующего компонента при использовании SSR?

Question

Я создаю таблицу, состояние которой нужно где-то инициализировать, и какие данные в конечном итоге обновляются с помощью fetch.

Моя проблема заключается в том, что таблица должна отображаться на стороне сервера, и поэтому данные должны отображаться насервер до монтирования компонента, я не могу использовать componentDidMount.

Я могу визуализировать внутренние таблицы в методе render (), используя props, но как потом обновить данные, когда таблица не 'не полагаться на получение данных через реквизит, но через вызовы API?

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

Что вы посоветуете при инициализации состояния компонента без нарушения этого правила?

Answer 1

Вы можете инициализировать состояние с помощью реквизита.В этом не будет никаких проблем.

Мой подход будет следующим:

• Сохраните одну переменную состояния и инициализируйте ее с помощью подпрограмм для рендеринга на стороне сервера.
• Поскольку компонент монтируется на стороне клиента, API будет вызываться в componentDidMount.
• Любые новые изменения реквизита будут отслеживаться в componentWillReceiveProps или статических getDerivedStateFromProps (в зависимости от вашей версии реакции).Если поступают какие-либо новые данные, обновите хранилище резервов (если вы используете хранилище резервов) или обновите состояние компонента, чтобы повторный рендеринг отображал обновленные данные.

Пример пластины котла:

class Component1 extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      tableData: props.tableData
    }
  }

  componentDidMount() {
    //Make API call here
    callAPItoGetData()
  }

  componentWillReceiveProps(nextProps) {
    const { tableData } =  nextProps
    if(tableData !== this.state.tableData ) { 
      //You need to make sure that this condition is fullfiled only once to avoid setting state multiple times
      this.setState({
        tableData: nextProps.tableData
      })
      //Alternatively, an action can be dispatched to update the redux-store which will update the props and cause re-render with new data
    }
  }

  render() {
    return (
      <div>{/*render table here*/}</div>
    )
  }
}

Надеюсь, это поможет.Возврат для любых сомнений / путаницы.

Answer 2

Это был бы хороший случай для React Hooks и ловушки useEffect.В соответствии с документами:

вы можете использовать useEffect Hook как комбинированные componentDidMount, componentDidUpdate и componentWillUnmount.

Вот простой пример, в котором компонент имеет данные реквизита.как состояние сначала, но как только вызов API завершен, он изменяется на данные API:

import React, { useState, useEffect } from "react";

function DataList(props) {
  const [users, setUsers] = useState(props.propData);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data);
      });
  });
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user.name}</li>
      ))}
    </ul>
  );
}

export default DataList;

Answer 3

Мое здесь: Позвольте вашему компоненту смонтировать пустую таблицу, инициализируя состояние значениями по умолчанию, и добавьте к вашему компоненту функцию, которая выбирает, откуда вы говорите, откуда должны поступать данные.Сделайте так, чтобы эта функция вызывалась, когда происходит событие, которое имеет смысл для вашего приложения.

Дайте мне знать, если и почему это не сработает, и с какими другими проблемами вы столкнетесь.