Слишком много проблем с повторным рендерингом в React - PullRequest
Новая
       66

Слишком много проблем с повторным рендерингом в React

0 голосов
/ 06 мая 2020

В моем приложении есть карточки, которые могут переходить на другие страницы с помощью кликов. Итак, у меня есть основной компонент, содержащий такую ​​кнопку: 

function MainComponent(props) {
.
.
.
  const handleClick = (key) => {
    history.push("/exampleurl/" + key);
  };

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

function MyComponent(props) {

    let { key } = useParams();

    const [myObject, setMyObject] = React.useState(null)

    useEffect(() => {

        axios.get('/myendpoint/' + key).then( response => {
            let myObject = response.data
            setMyObject(myObject)
        })
    }, [key])

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

Изменить: маршрут, который ведет к компонентам: 

          <Route path="/inbox">
            <MainComponent />
          </Route>
          <Route path="/exampleurl/:key">
            <NewComponent />
          </Route>

1 Ответ

1 голос
/ 06 мая 2020

Думаю, проблема связана с функцией handleClick.

Каждый раз, когда вызывается этот метод, вы sh добавляете новую запись в стек истории. Которые анализируют ваши определенные маршруты и отображают связанный компонент. В вашем случае это тот же компонент, но я не уверен, способен ли маршрутизатор определить его, поэтому я бы ожидал повторного рендеринга.

Возможно, решением было бы включить другое состояние, которое является отвечает за информирование компонента о текущем объекте, отображаемом на экране. Таким образом, key будет отвечать только за параметр маршрута, и это новое состояние будет отвечать за внутреннюю навигацию. 

function MyComponent(props) {

    let { key } = useParams();

    const [myObject, setMyObject] = React.useState(null)
    const [displayedObj, setDisplayedObj] = React.useState('');

    useEffect(() => {

        axios.get('/myendpoint/' + key).then( response => {
            let myObject = response.data
            setMyObject(myObject)
            setDisplayedObj(key)
        })
    }, [key, displayedObj]) // we listen for displayedObj too

, а затем в handleClick мы обновим это новое состояние. Это вызовет useEffect и, следовательно, обновит состояние myObject до нового значения: 

const handleClick = (key) => {
    setDisplayedObj(key); 
    // This will trigger the useEffect and refresh
    // the data displayed without reloading the page
};
...