Helpex - Trao đổi & giúp đỡ Đăng nhập
27

Giả sử chúng ta đã thiết lập trình cung cấp ngữ cảnh cùng với một số giá trị thuộc tính dữ liệu ban đầu.

Ở một nơi nào đó, giả sử một người tiêu dùng sau đó sửa đổi các thuộc tính đó.

Khi tải lại trang, những thay đổi đó sẽ bị mất. Cách tốt nhất để duy trì dữ liệu để chúng tôi có thể giữ lại các sửa đổi dữ liệu đó là gì? Bất kỳ phương pháp nào khác ngoài lưu trữ cục bộ đơn giản?

27 hữu ích 1 bình luận 36k xem chia sẻ
25

Vâng, nếu bạn muốn dữ liệu vẫn tồn tại qua các lần tải lại, các tùy chọn của bạn sẽ lưu trữ thông tin đó ở phía máy chủ (thông qua lệnh gọi api) hoặc trong bộ nhớ của trình duyệt (bộ nhớ cục bộ, bộ nhớ phiên, cookie). Tùy chọn bạn muốn sử dụng tùy thuộc vào mức độ bền bỉ mà bạn muốn đạt được. Bất kể lựa chọn lưu trữ là gì, nó có thể sẽ trông giống như một cái gì đó dọc theo dòng

const MyContext = React.createContext(defaultValue);

class Parent extends React.Component {
  setValue = (value) => {    
    this.setState({ value });
  }

  state = {
    setValue: this.setValue,
    value: localStorage.getItem("parentValueKey")
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.value !== prevState.value) {
      // Whatever storage mechanism you end up deciding to use.
      localStorage.setItem("parentValueKey", this.state.value)
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}
25 hữu ích 2 bình luận chia sẻ
7

Bối cảnh không tồn tại theo cách bạn muốn. Đây là ví dụ về những gì tôi đã làm, sử dụng chức năng không trạng thái với các móc React.

import React,  {useState, useEffect} from 'react'

export function sample(){
  // useState React hook
  const [data, setData] = useState({})
  const [moreData, setMoreData] = useState([])

  // useState React hook
  useEffect(() => { 
    setData({test: "sample", user: "some person"})
    setMoreData(["test", "string"])
  }, [])

  return data, moreData
}

export const AppContext = React.createContext()

export const AppProvider = props => (
  <AppContext.Provider value={{ ...sample() }}>
    {props.children}
  </AppContext.Provider>
)

Hãy hiểu ngay từ đầu rằng đây là một giải pháp thay thế, không phải là một giải pháp lâu dài. Dữ liệu liên tục là công việc của cơ sở dữ liệu, không phải của khách hàng. Tuy nhiên, nếu bạn cần dữ liệu lâu dài để phát triển, đây là một cách. Trước tiên, hãy lưu ý rằng tôi đang sử dụng React hooks . Đây là một tính năng được hỗ trợ đầy đủ kể từ ngày 16.8. Phương thức useEffect()thay thế vòng đời được tìm thấy trong khai báo lớp như của TLadd ở trên. Anh ấy đang sử dụng componentDidUpdateđể kiên trì. Cách cập nhật nhất để làm điều này là useEffect. Khi ứng dụng được làm mới, phương thức này sẽ được gọi và đặt một số dữ liệu được mã hóa cứng theo ngữ cảnh.

Để sử dụng nhà cung cấp:

import React from 'react'
import Component from './path/to/component'
import { AppProvider } from './path/to/context'

const App = () => {
  return (
    <AppProvider>
      <Component />
    </AppProvider>
  )
}

Khi bạn làm mới datamoreDatasẽ vẫn có bất kỳ giá trị mặc định nào bạn gán cho chúng.

7 hữu ích 2 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ reactjs persistence react-context , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading