React state 元素在 ReactDom.render 之后未更新

Question

I am trying to render an element using reactdom.render.我正在尝试使用 reactdom.render 渲染元素。 Once it renders the element that was set to the value of state the value of it doesn't change when state is updated.一旦它渲染了设置为 state 值的元素，它的值在 state 更新时不会改变。 The function changetodashboard creates and renders the element that does not change when other components update the state. function 更改为仪表板创建并呈现在其他组件更新 state 时不会更改的元素。 Sorry if my code is confusing I am learning.抱歉，如果我的代码令人困惑，我正在学习。

 import './App.css';
import TopLogo from "./moneyLogo.png"
import DashboardIcon from "./DashBoard1.png"
import TransactionsIcon from "./TransactionsIcon.png"
import NetWorthCard from "./NetWorthCard.js"
import NewTransaction from "./NewTransaction.js"
import RecentTransaction from "./RecentTransaction.js"
import { useState } from 'react';
import ReactDOM from 'react-dom'



function App() {
  const [NetWorth, setNetWorth] = useState("0.00")
  const [allItems, setallItems] = useState([])
  const [buttonType, setButtonType] = useState("Add Expense")
  const [From, setFrom] = useState()
  const [Usd, setUsd] = useState()
  const [Tags, setTags] = useState()
  const [Date, setDate] = useState()
  const [note, setNote] = useState()
  
  function changeFrom(from) {
    setFrom(from) 
    
  }
  function changeUsd(usd) {
    setUsd(usd)
    
    
  }
  function changetag(tag) {
    setTags(tag)
    
  }
  function changeDate(date) {
    setDate(date)
    
  }
  function changeNote(note) {
    setNote(note)
    
  }
 
  function changeToDashBoard() {
    let myElement = (<div>
      <h3 className="NetWorthTitle">
        NET WORTH
         </h3>
      <h3 className="NetWorthAmount">
        {NetWorth} USD
         </h3>
      <NetWorthCard netWorth={NetWorth}></NetWorthCard>
      <h3 className="NewTransactionTitle">
        NEW TRANSACTION
          </h3>
      <NewTransaction buttonType={buttonType} setButtonType={setButtonType} fromState={From} usdState={Usd} tagsState={Tags} dateState={Date} noteState={note} updateData={updateData} changefrom={changeFrom} changeUsd={changeUsd} changetag={changetag} changeDate={changeDate} changeNote={changeNote}></NewTransaction>
      <h3 className="RecentTranTitle">
        Recent Transactions
          </h3>
      <RecentTransaction allItems={allItems} updateItem={updateItem}>
      </RecentTransaction>
    </div>)
 
     ReactDOM.render(myElement, document.getElementById('DashBoard')) 
      
  }
  

  function updateData() {
    if (From == "" || Usd == "" || Date == "" || Tags == "" || note == "") {
      console.log("No empty Inputs")
    }
    else if (isNaN(Usd) == true ) {
      console.log("Must Be a Number")
      console.log(Usd)
      
    }
    else if (buttonType == "Add Expense") {
    let list1 = allItems.push({ name: From, amount: -Usd, tags: Tags, date: Date, notes: note })
    const addMessage = (list1) => setallItems(state => [...state, list1])
    setFrom("")
    setUsd("")
    setTags("")
    setDate("")
    setNote("")
  
    let totalAmount = 0
    
    for(let i = 0; i < allItems.length; i++){
      totalAmount += Number(allItems[i].amount)
    }
      setNetWorth(totalAmount.toFixed(2))
    }
    else {
      let list1 = allItems.push({ name: From, amount: Usd, tags: Tags, date: Date, notes: note })
      const addMessage = (list1) => setallItems(state => [...state, list1])
      setFrom("")
      setUsd("")
      setTags("")
      setDate("")
      setNote("")

      let totalAmount = 0

      for (let i = 0; i < allItems.length; i++) {
        totalAmount += Number(allItems[i].amount)
      }
      setNetWorth(totalAmount.toFixed(2))
    }

    
  }
  function updateItem(newList) {
    setallItems(newList)
  }


  return (
    <div className="App" id = "App">
      <body>
        <div className = "topBar">
          <img src = {TopLogo}>

          </img>
          <h2>
            Dashboard
          </h2>

        </div>
        <div className = "sideBar">
          <button onClick={changeToDashBoard}>
            <img src={DashboardIcon}>

            </img>
            Dashboard
          </button>
          <button onClick={changeToTransactions}>
            <img src={TransactionsIcon}>

            </img>
            Transactions
          </button>
        </div>
        <div className="DataHolder" id="DashBoard">
         <h3 className= "NetWorthTitle">
           NET WORTH
         </h3>
         <h3 className= "NetWorthAmount">
            {NetWorth} USD
         </h3>
          <NetWorthCard netWorth = {NetWorth}></NetWorthCard>
          <h3 className = "NewTransactionTitle">
            NEW TRANSACTION
          </h3>
          <NewTransaction buttonType={buttonType} setButtonType={setButtonType}fromState={From} usdState={Usd} tagsState={Tags} dateState={Date} noteState={note} updateData={updateData} changefrom = {changeFrom} changeUsd = {changeUsd} changetag= {changetag} changeDate={changeDate} changeNote={changeNote}></NewTransaction>
          <h3 className = "RecentTranTitle">
            Recent Transactions
          </h3>
          <RecentTransaction allItems={allItems} updateItem={updateItem}>

          </RecentTransaction>
          
        </div>
    
      </body>
    </div>
  );
}

export default App;

Answer 1

I am trying to render an element using reactdom.render.我正在尝试使用 reactdom.render 渲染元素。 Once it renders the element that was set to the value of state the value of it doesn't change when state is updated.一旦它渲染了设置为 state 值的元素，它的值在 state 更新时不会改变。 The function changetodashboard creates and renders the element that does not change when other components update the state. function 更改为仪表板创建并呈现在其他组件更新 state 时不会更改的元素。 Sorry if my code is confusing I am learning.抱歉，如果我的代码令人困惑，我正在学习。

 import './App.css';
import TopLogo from "./moneyLogo.png"
import DashboardIcon from "./DashBoard1.png"
import TransactionsIcon from "./TransactionsIcon.png"
import NetWorthCard from "./NetWorthCard.js"
import NewTransaction from "./NewTransaction.js"
import RecentTransaction from "./RecentTransaction.js"
import { useState } from 'react';
import ReactDOM from 'react-dom'



function App() {
  const [NetWorth, setNetWorth] = useState("0.00")
  const [allItems, setallItems] = useState([])
  const [buttonType, setButtonType] = useState("Add Expense")
  const [From, setFrom] = useState()
  const [Usd, setUsd] = useState()
  const [Tags, setTags] = useState()
  const [Date, setDate] = useState()
  const [note, setNote] = useState()
  
  function changeFrom(from) {
    setFrom(from) 
    
  }
  function changeUsd(usd) {
    setUsd(usd)
    
    
  }
  function changetag(tag) {
    setTags(tag)
    
  }
  function changeDate(date) {
    setDate(date)
    
  }
  function changeNote(note) {
    setNote(note)
    
  }
 
  function changeToDashBoard() {
    let myElement = (<div>
      <h3 className="NetWorthTitle">
        NET WORTH
         </h3>
      <h3 className="NetWorthAmount">
        {NetWorth} USD
         </h3>
      <NetWorthCard netWorth={NetWorth}></NetWorthCard>
      <h3 className="NewTransactionTitle">
        NEW TRANSACTION
          </h3>
      <NewTransaction buttonType={buttonType} setButtonType={setButtonType} fromState={From} usdState={Usd} tagsState={Tags} dateState={Date} noteState={note} updateData={updateData} changefrom={changeFrom} changeUsd={changeUsd} changetag={changetag} changeDate={changeDate} changeNote={changeNote}></NewTransaction>
      <h3 className="RecentTranTitle">
        Recent Transactions
          </h3>
      <RecentTransaction allItems={allItems} updateItem={updateItem}>
      </RecentTransaction>
    </div>)
 
     ReactDOM.render(myElement, document.getElementById('DashBoard')) 
      
  }
  

  function updateData() {
    if (From == "" || Usd == "" || Date == "" || Tags == "" || note == "") {
      console.log("No empty Inputs")
    }
    else if (isNaN(Usd) == true ) {
      console.log("Must Be a Number")
      console.log(Usd)
      
    }
    else if (buttonType == "Add Expense") {
    let list1 = allItems.push({ name: From, amount: -Usd, tags: Tags, date: Date, notes: note })
    const addMessage = (list1) => setallItems(state => [...state, list1])
    setFrom("")
    setUsd("")
    setTags("")
    setDate("")
    setNote("")
  
    let totalAmount = 0
    
    for(let i = 0; i < allItems.length; i++){
      totalAmount += Number(allItems[i].amount)
    }
      setNetWorth(totalAmount.toFixed(2))
    }
    else {
      let list1 = allItems.push({ name: From, amount: Usd, tags: Tags, date: Date, notes: note })
      const addMessage = (list1) => setallItems(state => [...state, list1])
      setFrom("")
      setUsd("")
      setTags("")
      setDate("")
      setNote("")

      let totalAmount = 0

      for (let i = 0; i < allItems.length; i++) {
        totalAmount += Number(allItems[i].amount)
      }
      setNetWorth(totalAmount.toFixed(2))
    }

    
  }
  function updateItem(newList) {
    setallItems(newList)
  }


  return (
    <div className="App" id = "App">
      <body>
        <div className = "topBar">
          <img src = {TopLogo}>

          </img>
          <h2>
            Dashboard
          </h2>

        </div>
        <div className = "sideBar">
          <button onClick={changeToDashBoard}>
            <img src={DashboardIcon}>

            </img>
            Dashboard
          </button>
          <button onClick={changeToTransactions}>
            <img src={TransactionsIcon}>

            </img>
            Transactions
          </button>
        </div>
        <div className="DataHolder" id="DashBoard">
         <h3 className= "NetWorthTitle">
           NET WORTH
         </h3>
         <h3 className= "NetWorthAmount">
            {NetWorth} USD
         </h3>
          <NetWorthCard netWorth = {NetWorth}></NetWorthCard>
          <h3 className = "NewTransactionTitle">
            NEW TRANSACTION
          </h3>
          <NewTransaction buttonType={buttonType} setButtonType={setButtonType}fromState={From} usdState={Usd} tagsState={Tags} dateState={Date} noteState={note} updateData={updateData} changefrom = {changeFrom} changeUsd = {changeUsd} changetag= {changetag} changeDate={changeDate} changeNote={changeNote}></NewTransaction>
          <h3 className = "RecentTranTitle">
            Recent Transactions
          </h3>
          <RecentTransaction allItems={allItems} updateItem={updateItem}>

          </RecentTransaction>
          
        </div>
    
      </body>
    </div>
  );
}

export default App;

React state 元素在 ReactDom.render 之后未更新

问题描述

1 个解决方案

解决方案1
0 2021-05-03 22:09:44

React state 元素在 ReactDom.render 之后未更新

问题描述

1 个解决方案

解决方案1 0 2021-05-03 22:09:44

解决方案1
0 2021-05-03 22:09:44