代码之家 › 专栏 › 技术社区 › Deadpool

功能组件不会重新排序,甚至在更改时在useEffect依赖项中传递[sum]

react-hooks react-native reactjs javascript

Deadpool · 技术社区 · 4 年前

即使单击按钮,也会显示 sum 变量更改为 29.98 useEffect 钩子,我添加了依赖项作为 [sum] ,这样,如果num的值更改 let sum = 0

import React, { useEffect } from 'react'; 
import './SelectEx1.css'

const SelectEx1 = (props) => {

let data = [
    {
        id: 1,
        title: "Milk",
        price: 15.99,
    },
    {
        id: 2,
        title: "Bread",
        price: 13.99,
    },
];
let sum = 0; 

useEffect(()=>{}, [sum]);

const handleClick = () => {
  console.log(data);
  data.map((item) => {
    sum = (sum + item.price)
  });
}

  return (
    <div>
      <p>hello, {sum}</p>
      <button onClick={handleClick}>click-me</button>
    </div>
  )
}
export default SelectEx1;

3 回复 | 直到 4 年前

Hanchen Jiang 4 年前

我想你想要的是

const [sum, setSum] = useState(0); 
...
const handleClick = () => {
  console.log(data);
  const total = data.reduce((a, b) => a + b, 0);
  setSum(total);
}

因此 handleClick 将触发状态更改,从而触发重新加载。 sum 进入的依赖项列表中 useEffect 仅触发中的函数(第一个参数) 使用效果 什么时候改变了。因为第一个参数是一个空函数,所以当改变了。

Reza Ghorbani 4 年前

useEffect 放 sum useState onClick 如下图所示:

const [sum,setSum] = useState(0);
const handleClick = () => {
  const reducer = (previousValue, currentValue) => previousValue.price + 
  currentValue.price;
  setSum(data.reduce(reducer))
}

Sanket Shah 4 年前

而不是定义 sum 作为变量,使其处于状态。因为状态更新触发重新呈现。打电话 setSum handleClick 函数来更改状态 总和 的值,该值将导致重新渲染,您将在UI上看到更新后的值:

import React, { useEffect } from 'react'; 
import './SelectEx1.css'

const data = [
    {
        id: 1,
        title: "Milk",
        price: 15.99,
    },
    {
        id: 2,
        title: "Bread",
        price: 13.99,
    },
];
 
const SelectEx1 = (props) => {

const [sum, setSum] = React.useState(0)

const handleClick = () => {
  const total = data?.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue.price
  }, 0)
  setSum(total)
}

  return (
    <div>
      <p>hello, {sum}</p>
      <button onClick={handleClick}>click-me</button>
    </div>
  )
}

export default SelectEx1;

推荐文章