phương thức setState không phản ánh sự thay đổi ngay lập tức

Tôi đang cố gắng học móc và useStatephương pháp đã làm tôi bối rối. Tôi đang gán một giá trị ban đầu cho một trạng thái dưới dạng một mảng. Phương thức thiết lập trong useStatekhông hoạt động đối với tôi ngay cả với spread(...)hoặc without spread operator. Tôi đã tạo một API trên một PC khác mà tôi đang gọi và tìm nạp dữ liệu mà tôi muốn đặt vào trạng thái.

Đây là mã của tôi:

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);

Các setMovies(result)cũng như setMovies(...result)không hoạt động. Có thể sử dụng một số trợ giúp ở đây.

Tôi hy vọng biến kết quả sẽ được đẩy vào mảng phim.

Giống như các thành phần setState trong Class được tạo bằng cách mở rộng React.Componenthoặc React.PureComponent, cập nhật trạng thái bằng trình cập nhật được cung cấp bởi useStatehook cũng không đồng bộ và sẽ không phản ánh ngay lập tức

Ngoài ra, vấn đề chính ở đây không chỉ là bản chất không đồng bộ mà thực tế là các giá trị trạng thái được sử dụng bởi các hàm dựa trên các lần đóng hiện tại của chúng và các cập nhật trạng thái sẽ phản ánh trong lần kết xuất lại tiếp theo mà các lần đóng hiện tại không bị ảnh hưởng mà các lần đóng mới được tạo . Bây giờ ở trạng thái hiện tại, các giá trị trong hook được lấy bởi các lần đóng hiện có và khi kết xuất lại xảy ra, các lần đóng được cập nhật dựa trên việc chức năng có được tạo lại lần nữa hay không

Ngay cả khi bạn thêm một setTimeoutchức năng, mặc dù thời gian chờ sẽ chạy sau một thời gian mà việc kết xuất lại sẽ xảy ra, nhưng setTimout vẫn sẽ sử dụng giá trị từ lần đóng trước đó và không phải là cập nhật.

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

Nếu bạn muốn thực hiện một hành động về cập nhật trạng thái, bạn cần sử dụng hook useEffect, giống như sử dụng componentDidUpdatetrong các thành phần lớp vì trình thiết lập được trả về bởi useState không có mẫu gọi lại

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

Theo cú pháp cập nhật trạng thái có liên quan, setMovies(result)sẽ thay thế moviesgiá trị trước đó trong trạng thái bằng trạng thái có sẵn từ yêu cầu async

Tuy nhiên, nếu bạn muốn hợp nhất phản hồi với các giá trị hiện có trước đó, bạn phải sử dụng cú pháp gọi lại của cập nhật trạng thái cùng với việc sử dụng đúng cú pháp lây lan như

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

_{Chi tiết bổ sung cho câu trả lời trước :}

Mặc dù React setState là không đồng bộ (cả lớp và móc), và thật hấp dẫn khi sử dụng thực tế đó để giải thích hành vi được quan sát, đó không phải là lý do tại sao nó xảy ra.

TLDR: Lý do là một phạm vi đóng xung quanh một constgiá trị bất biến .

Các giải pháp:

• đọc giá trị trong hàm render (không nằm trong các hàm lồng nhau):

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

• thêm biến vào phụ thuộc (và sử dụng quy tắc eslint phản ứng / hookive -deps-deps ):

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

• sử dụng một tham chiếu có thể thay đổi (khi không thể ở trên):

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

Giải thích tại sao nó xảy ra:

Nếu async là lý do duy nhất, nó sẽ có thể await setState().

Howerver, cả hai propsvà stateđược coi là không thay đổi trong 1 kết xuất .

Đối xử this.statenhư thể nó là bất biến.

Với hook, giả định này được tăng cường bằng cách sử dụng các giá trị không đổi với consttừ khóa:

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

Giá trị có thể khác nhau giữa 2 kết xuất, nhưng vẫn là một hằng số bên trong chính kết xuất và bên trong bất kỳ bao đóng nào (các chức năng tồn tại lâu hơn ngay cả khi kết xuất hoàn tất, ví dụ: useEffecttrình xử lý sự kiện, bên trong bất kỳ Promise hoặc setTimeout nào).

Xem xét việc thực hiện giả mạo, nhưng đồng bộ , giống như React:

// 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>

Tôi vừa hoàn thành việc viết lại với useReducer, sau bài viết của @kentcdobs (tham khảo bên dưới), điều này thực sự mang lại cho tôi một kết quả chắc chắn mà không phải chịu một chút nào từ những vấn đề đóng cửa này.

xem: https://bestcdodds.com/blog/how-to-use-react-context-effectively

Tôi đã cô đọng cái nồi hơi có thể đọc được của anh ấy đến mức DRYness ưa thích của tôi - đọc triển khai hộp cát của anh ấy sẽ cho bạn thấy nó thực sự hoạt động như thế nào.

Thưởng thức, tôi biết tôi !!

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,
}

với cách sử dụng tương tự như thế này:

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 = {};

Bây giờ mọi thứ vẫn tồn tại suôn sẻ ở mọi nơi trên tất cả các trang của tôi

Đẹp!

Cảm ơn Kent!

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

Bây giờ bạn sẽ thấy, đó là mã của bạn thực sự làm việc. Những gì không làm việc là console.log(movies). Điều này là do moviescác điểm đến trạng thái cũ . Nếu bạn di chuyển ra console.log(movies)bên ngoài useEffect, ngay phía trên trở lại, bạn sẽ thấy đối tượng phim được cập nhật.