metode set useState tidak mencerminkan perubahan segera

Saya mencoba mempelajari kait dan useStatemetode ini membuat saya bingung. Saya menetapkan nilai awal ke keadaan dalam bentuk array. Metode yang diset di useStatetidak berfungsi untuk saya bahkan dengan spread(...)atau without spread operator. Saya telah membuat API di PC lain yang saya panggil dan mengambil data yang ingin saya setel ke status.

Ini kode saya:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    {
      category: "",
      photo: "",
      description: "",
      id: 0,
      name: "",
      rating: 0
    }
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {
        //const response = await fetch(
        //`http://192.168.1.164:5000/movies/display`
        //);
        //const json = await response.json();
        //const result = json.data.result;
        const result = [
          {
            category: "cat1",
            description: "desc1",
            id: "1546514491119",
            name: "randomname2",
            photo: null,
            rating: "3"
          },
          {
            category: "cat2",
            description: "desc1",
            id: "1546837819818",
            name: "randomname1",
            rating: "5"
          }
        ];
        console.log(result);
        setMovies(result);
        console.log(movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return <p>hello</p>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

The setMovies(result)serta setMovies(...result)tidak bekerja. Bisa menggunakan bantuan di sini.

Saya berharap variabel hasil didorong ke array film.

Sama seperti komponen setState di Kelas yang dibuat dengan cara memperpanjang React.Componentatau React.PureComponent, pembaruan status menggunakan pembaru yang disediakan oleh useStatehook juga tidak sinkron, dan tidak akan langsung mencerminkan

Juga masalah utama di sini tidak hanya sifat asinkron tetapi fakta bahwa nilai-nilai negara digunakan oleh fungsi berdasarkan penutupan mereka saat ini dan pembaruan keadaan akan tercermin dalam render ulang berikutnya dengan mana penutupan yang ada tidak terpengaruh tetapi yang baru dibuat . Sekarang dalam keadaan saat ini nilai-nilai dalam kait diperoleh dengan penutupan yang ada dan ketika terjadi render, penutupan diperbarui berdasarkan pada apakah fungsi diciptakan kembali atau tidak.

Sekalipun Anda menambahkan setTimeoutfungsi, meskipun batas waktu akan berjalan setelah beberapa waktu yang akan menyebabkan render ulang, tetapi setTimout masih akan menggunakan nilai dari penutupan sebelumnya dan bukan yang diperbarui.

setMovies(result);
console.log(movies) // movies here will not be updated

Jika Anda ingin melakukan tindakan pada pembaruan negara, Anda perlu menggunakan hook useEffect, seperti menggunakan componentDidUpdatekomponen di kelas karena setter yang dikembalikan oleh useState tidak memiliki pola panggilan balik

useEffect(() => {
    // action on update of movies
}, [movies]);

Sejauh menyangkut sintaks untuk memperbarui status, setMovies(result)akan mengganti nilai sebelumnya moviesdalam status dengan yang tersedia dari permintaan async

Namun jika Anda ingin menggabungkan respons dengan nilai-nilai yang sudah ada sebelumnya, Anda harus menggunakan sintaks callback pembaruan status bersama dengan penggunaan yang benar dari sintaksis penyebaran seperti

setMovies(prevMovies => ([...prevMovies, ...result]));

_{Rincian tambahan untuk jawaban sebelumnya :}

Sementara Bereaksi ini setState adalah asynchronous (kedua kelas dan kait), dan itu tergoda untuk menggunakan fakta bahwa untuk menjelaskan perilaku yang diamati, itu bukan alasan mengapa hal itu terjadi.

TLDR: Alasannya adalah cakupan penutupan di sekitar constnilai yang tidak berubah .

Solusi:

• baca nilai dalam fungsi render (tidak di dalam fungsi bersarang):

  useEffect(() => { setMovies(result) }, [])
  console.log(movies)

• tambahkan variabel ke dependensi (dan gunakan aturan eslint react-hooks / exhaustive-deps ):

  useEffect(() => { setMovies(result) }, [])
  useEffect(() => { console.log(movies) }, [movies])

• gunakan referensi yang bisa berubah-ubah (bila hal di atas tidak mungkin):

  const moviesRef = useRef(initialValue)
  useEffect(() => {
    moviesRef.current = result
    console.log(moviesRef.current)
  }, [])

Penjelasan mengapa itu terjadi:

Jika async adalah satu-satunya alasan, itu mungkin await setState() .

Howerver, baik propsdan stateyang diasumsikan tidak berubah selama 1 render .

Perlakukan this.stateseolah-olah itu abadi.

Dengan kait, asumsi ini ditingkatkan dengan menggunakan nilai konstan dengan constkata kunci:

const [state, setState] = useState('initial')

Nilai mungkin berbeda antara 2 render, tetapi tetap konstan di dalam render itu sendiri dan di dalam setiap penutupan (fungsi yang hidup lebih lama bahkan setelah render selesai, misalnyauseEffect , penangan acara, di dalam Janji atau setTimeout apa pun).

Pertimbangkan untuk mengikuti implementasi React-like palsu, tetapi sinkron , seperti:

// sync implementation:

let internalState
let renderAgain

const setState = (updateFn) => {
  internalState = updateFn(internalState)
  renderAgain()
}

const useState = (defaultState) => {
  if (!internalState) {
    internalState = defaultState
  }
  return [internalState, setState]
}

const render = (component, node) => {
  const {html, handleClick} = component()
  node.innerHTML = html
  renderAgain = () => render(component, node)
  return handleClick
}

// test:

const MyComponent = () => {
  const [x, setX] = useState(1)
  console.log('in render:', x) // ✅
  
  const handleClick = () => {
    setX(current => current + 1)
    console.log('in handler/effect/Promise/setTimeout:', x) // ❌ NOT updated
  }
  
  return {
    html: `<button>${x}</button>`,
    handleClick
  }
}

const triggerClick = render(MyComponent, document.getElementById('root'))
triggerClick()
triggerClick()
triggerClick()

<div id="root"></div>

Saya baru saja selesai menulis ulang dengan useReducer, mengikuti artikel @kentcdobs (ref di bawah) yang benar-benar memberi saya hasil yang solid yang tidak menderita sedikit pun dari masalah penutupan ini.

lihat: https://kentcdodds.com/blog/how-to-use-react-context-effectively

Saya memadatkan boilerplate-nya yang dapat dibaca ke tingkat DRYness yang saya sukai - membaca implementasi sandbox-nya akan menunjukkan kepada Anda bagaimana cara kerjanya.

Selamat menikmati, saya tahu saya !!

import React from 'react'

// ref: https://kentcdodds.com/blog/how-to-use-react-context-effectively

const ApplicationDispatch = React.createContext()
const ApplicationContext = React.createContext()

function stateReducer(state, action) {
  if (state.hasOwnProperty(action.type)) {
    return { ...state, [action.type]: state[action.type] = action.newValue };
  }
  throw new Error(`Unhandled action type: ${action.type}`);
}

const initialState = {
  keyCode: '',
  testCode: '',
  testMode: false,
  phoneNumber: '',
  resultCode: null,
  mobileInfo: '',
  configName: '',
  appConfig: {},
};

function DispatchProvider({ children }) {
  const [state, dispatch] = React.useReducer(stateReducer, initialState);
  return (
    <ApplicationDispatch.Provider value={dispatch}>
      <ApplicationContext.Provider value={state}>
        {children}
      </ApplicationContext.Provider>
    </ApplicationDispatch.Provider>
  )
}

function useDispatchable(stateName) {
  const context = React.useContext(ApplicationContext);
  const dispatch = React.useContext(ApplicationDispatch);
  return [context[stateName], newValue => dispatch({ type: stateName, newValue })];
}

function useKeyCode() { return useDispatchable('keyCode'); }
function useTestCode() { return useDispatchable('testCode'); }
function useTestMode() { return useDispatchable('testMode'); }
function usePhoneNumber() { return useDispatchable('phoneNumber'); }
function useResultCode() { return useDispatchable('resultCode'); }
function useMobileInfo() { return useDispatchable('mobileInfo'); }
function useConfigName() { return useDispatchable('configName'); }
function useAppConfig() { return useDispatchable('appConfig'); }

export {
  DispatchProvider,
  useKeyCode,
  useTestCode,
  useTestMode,
  usePhoneNumber,
  useResultCode,
  useMobileInfo,
  useConfigName,
  useAppConfig,
}

dengan penggunaan yang mirip dengan ini:

import { useHistory } from "react-router-dom";

// https://react-bootstrap.github.io/components/alerts
import { Container, Row } from 'react-bootstrap';

import { useAppConfig, useKeyCode, usePhoneNumber } from '../../ApplicationDispatchProvider';

import { ControlSet } from '../../components/control-set';
import { keypadClass } from '../../utils/style-utils';
import { MaskedEntry } from '../../components/masked-entry';
import { Messaging } from '../../components/messaging';
import { SimpleKeypad, HandleKeyPress, ALT_ID } from '../../components/simple-keypad';

export const AltIdPage = () => {
  const history = useHistory();
  const [keyCode, setKeyCode] = useKeyCode();
  const [phoneNumber, setPhoneNumber] = usePhoneNumber();
  const [appConfig, setAppConfig] = useAppConfig();

  const keyPressed = btn => {
    const maxLen = appConfig.phoneNumberEntry.entryLen;
    const newValue = HandleKeyPress(btn, phoneNumber).slice(0, maxLen);
    setPhoneNumber(newValue);
  }

  const doSubmit = () => {
    history.push('s');
  }

  const disableBtns = phoneNumber.length < appConfig.phoneNumberEntry.entryLen;

  return (
    <Container fluid className="text-center">
      <Row>
        <Messaging {...{ msgColors: appConfig.pageColors, msgLines: appConfig.entryMsgs.altIdMsgs }} />
      </Row>
      <Row>
        <MaskedEntry {...{ ...appConfig.phoneNumberEntry, entryColors: appConfig.pageColors, entryLine: phoneNumber }} />
      </Row>
      <Row>
        <SimpleKeypad {...{ keyboardName: ALT_ID, themeName: appConfig.keyTheme, keyPressed, styleClass: keypadClass }} />
      </Row>
      <Row>
        <ControlSet {...{ btnColors: appConfig.buttonColors, disabled: disableBtns, btns: [{ text: 'Submit', click: doSubmit }] }} />
      </Row>
    </Container>
  );
};

AltIdPage.propTypes = {};

Sekarang semuanya tetap lancar di mana-mana di semua halaman saya

Bagus!

Kent terima kasih!

// replace
return <p>hello</p>;
// with
return <p>{JSON.stringify(movies)}</p>;

Sekarang Anda harus melihat, bahwa kode Anda benar - benar berfungsi. Yang tidak berfungsi adalah console.log(movies). Ini karena moviesmenunjuk ke keadaan lama . Jika Anda memindahkan bagian console.log(movies)luar useEffect, tepat di atas pengembalian, Anda akan melihat objek film yang diperbarui.