Question

我正在尝试以正确的方式从另一个组件访问状态。据我了解，您不能直接访问状态，但应该解除状态。出于我的目的，我试图从我的 profile 组件 中访问 user 的名称，在我的 form 组件 中使用 localStorage。

我的配置文件组件....

import React, { Component } from 'react';
import NavigationBar from './NavigationBar'
 
export default class Profile extends Component {
    documentData;
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.state = {
            name: '',
            email: '',
            phone: '',
            address1: '',
            address2: '',
            addresscitystate: '',
            addresszip: ''
        }
    }

handleChange= (e)=> {
    this.setState({[e.target.name]:e.target.value});
}
// on form submit...
handleFormSubmit(e) {
    e.preventDefault()
   localStorage.setItem('document',JSON.stringify(this.state));
   alert ('Profile has been updated')
}
 
// React Life Cycle
componentDidMount() {
    this.documentData = JSON.parse(localStorage.getItem('document'));
 
    if (localStorage.getItem('document')) {
        this.setState({
            name: this.documentData.name,
           phone: this.documentData.phone,
           email: this.documentData.email,
           address1: this.documentData.address1,
           address2: this.documentData.address2,
           addresscitystate: this.documentData.addresscitystate,
           addresszip: this.documentData.addresszip,
    })
} else {
    this.setState({
            name: '',
            phone: '',
            email: '',
            address1: '',
            address2: '',
            addresscitystate: '',
            addresszip: ''
    })
}
}
 
render() {
    return (
        <div className="container">
            <NavigationBar />
            <div>
            <h1 className='profile-title'> Profile </h1>
            </div>
            <form onSubmit={this.handleFormSubmit}>
                <div className="form-group">
                    **<input type="text" name="name" className="form-control" value={this.state.name} onChange={this.handleChange} />
                    <label>Name</label>**
                </div>
....

我的表单组件....

import  {useState, useEffect} from 'react'



const Form = () => {

//initial state
const [transaction, setTransaction] = useState({
    description: '',
    amount: ''
  })
  const [list, setList] = useState(
    JSON.parse(localStorage.getItem('list')) || []
  )
  const [balance, setBalance] = useState('')
  const [income, setIncome] = useState(
    JSON.parse(localStorage.getItem('income'))
  )
  const [expense, setExpense] = useState(JSON.parse(localStorage.getItem('expense')))

    //updates based onChange value
const updateBalance = (e) => {
    setTransaction({
        ...transaction,
        [e.target.name]:
         e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
        })
}

//identify if transaction is income/expense

const plusMinus = () => {
    transaction.amount > 0
     ? setIncome(income + transaction.amount)
      : setExpense(expense + transaction.amount)
}
// updates balance after transaction is added

const getBalance = () => {
    const amounts = list.map(i => i.amount);
    const money = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
    setBalance(money)
  }
  
useEffect(() => {
    getBalance()
    localStorage.setItem('list', JSON.stringify(list))
    localStorage.setItem('income', JSON.stringify(income))
    localStorage.setItem('expense', JSON.stringify(expense))
  }, [])


//clear transaction list
const clearBudget = () => {
    localStorage.clear();
    alert ('Balance has been cleared, Please Refresh Page')
}

const onSubmit = e => {
    e.preventDefault();
    setList([transaction, ...list])
    plusMinus()
    setTransaction({ description: '', amount: ''})
    }

return (
    
    **<div>
        <div className='totals'>
        <h2 className='balance'> Hello User, Your Current Balance </h2>
        <h3> ${balance} </h3>
        </div>**
...

任何关于如何开始的建议将不胜感激！

谢谢。

Answer 1

由于您想让您的 user 在整个应用程序中可访问，因此不建议将其传递给您的组件，因为它会导致 prop drilling，这不是一个好的做法。为避免该问题，您应该考虑使用名为 ContextAPI 的 react 内置功能或任何其他 state management 库，例如 Redux 的 Flux。但既然您的应用并不复杂，ContextApi 将是一个不错的选择。

Answer 2

当您需要从多个组件访问状态时，您应该使用 Context API 或状态管理库，例如 Redux。请注意，Redux 主要用于较大的应用程序，ContextAPI 应该足以满足您的用例。

从另一个组件访问状态

2 个答案: