javascript - React setState 更新值但未显示在 UI 中

Question

我是初学者，想编写一个小型仓储应用程序。单击 listItem 组件中的 take 或 add 按钮应调用 addAmount 或 takeAmount 函数并更改 listItem 的金额值。 console.log 提供了正确的值更改，但 UI 中的数字没有更改。你能帮助我吗？

应用组件:

import React, { useState } from 'react';
import logo from './logoblank.svg';
import './App.css';
import { AccessAlarm, AccountBox, LocalCafe, Print } from '@material-ui/icons';
import ListItem from './ListItem/ListItem.js';
import Location from './Location/Location.js';
import Category from './Category/Category.js';
import Search from './Search/Search.js'

const App = props => {
  const [locationState, setLocationState] = useState({
    locations: [
      { name: '', picture: '' }
    ]
  });

  let [listState, setListState] = useState({
    listItems: [
      { key: '', icon: <LocalCafe />, name: 'xxx', details: 'xxx', storage: 'xxx', amount: 3, orderAction: 'xxx' },
      { key: '', icon: <Print />, name: 'xxx', details: 'xxx', storage: 'xxx', amount: 5, orderAction: 'xxx' }
    ]
  });

  let [searchState, setSearchState] = useState({value: ''});

  console.log(locationState, listState);

  const listItems = (
    <div>
      {listState.listItems.map((listItem, index) => {
        return <ListItem
          key={index}
          icon={listItem.icon}
          name={listItem.name}
          details={listItem.details}
          storage={listItem.storage}
          amount={listItem.amount}
          click1={() => addAmount(index)}
          click2={() => takeAmount(index)}/>
      })}
    </div>
  )

  let addAmount = (index) => {
    let amount = listState.listItems[index].amount;

    amount = amount + 1;

    let listCopy = listState;

    listCopy.listItems[index].amount = amount;

    setListState(listCopy);

    console.log(listState.listItems[index].amount);

    console.log(listState);
  }

  let takeAmount = (index) => {
    let amount = listState.listItems[index].amount;

    amount = amount - 1;

    let listCopy = listState;

    listCopy.listItems[index].amount = amount;

    setListState(listCopy);

    console.log(listCopy.listItems[index].amount);
  }

  let searchChangeHandler = (event) => {
    let searchValue = searchState;
    searchValue.value = event.target.value;
    setSearchState(searchValue);

    console.log(searchState);
  }


  return (
    <div className="App">
      <header className="App-header">
        <div className="App-header-left">
          <img src={logo} className="App-logo" alt="SleevesUp!" />
          <p className="pad">Warehousing</p>
        </div>
        <div className="App-header">
          <Search
          changed={(event) => searchChangeHandler(event)} />
        </div>
        <div className="App-header-right">
          <p className="pad">Roomhero</p>
          <AccountBox />
        </div>
      </header>
      <Location
        name={locationState.locations[0].name}
        picture={locationState.locations[0].picture}
      />
      <Category />
      {listItems}
    </div>
  );
}

export default App;

这是 ListItem.js 的代码

import React from 'react';
import './ListItem.css'

const listItem = (props) => {
    return (
        <div className="listItem">
            <div className="listItemColumn icon">
                {props.icon}
            </div>
            <div className="listItemColumn">
                <div className="name">{props.name}</div>
                <div className="details">{props.details}</div>
            </div>
            <div className="listItemColumn">
                {props.storage}
            </div>
            <div className="listItemColumnTake">
                <button className="take" onClick={props.click2}>Take</button>{props.amount}<button className="take" onClick={props.click1}>Add</button>
            </div>
            <div className="listItemColumn">
                <button className="order">Order</button>
            </div>
        </div>
    )
};

export default listItem;

Answer 1

您正在将状态的引用复制到 listCopy，从而直接改变状态。

这不会导致重新渲染。

而是通过扩展当前对象来创建一个新对象，它应该可以正常工作。

let listCopy = {...listState};