更新地图内的状态挂钩 [英] Update state hooks inside map

问题描述

我想更新地图内的状态挂钩.例子如下:

const App = () =>{const [total, setTotal] = useState();//我想使用它但我收到一个错误const [sampleMap, setSampleMap] = useState([{ id: 1, name: John", 收入: 100 },{ id: 2, name: George", 收入:200 }]);让净收入 = 0;返回 (
<div>我想在遍历地图后更新它:<b>{netIncome}</b></div>{sampleMap.map((value, key) => {净收入 += 价值.收入；//setTotal(netIncome);返回 (<div key={key}>{值.名称}{"- "}{价值.收入}
);})}<div>净收入:{netIncome}</div>

);};

我想计算总收入并将其传播到其他地方.如果我在地图内使用状态挂钩，则会收到以下错误:

重新渲染太多.React 限制渲染次数以防止无限循环.

我怎样才能做到这一点?

解决方案

我会在返回 JSX 之前计算独立语句中的值:

const App = () =>{const [sampleMap, setSampleMap] = React.useState([{ id: 1, name: "John", 收入: 100 },{ id: 2, name: "George", 收入: 200 }]);const netIncome = sampleMap.reduce((a, b) => a + b.income, 0);返回 (<div className="应用程序"><div>我想在遍历地图后更新它:<b>{netIncome}</b></div>{sampleMap.map((value, key) => (<div key={key}>{值.名称}{" - "}{价值.收入}

))}<div>净收入:{netIncome}</div>

);};ReactDOM.render(, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div class="react"></div>

I want to update a state hook inside a map. Here is the example:

const App = () => {
  const [total, setTotal] = useState(); // I want to use it but I receive an error
  const [sampleMap, setSampleMap] = useState([
    { id: 1, name: "John", income: 100 },
    { id: 2, name: "George", income: 200 }
  ]);

  let netIncome = 0;
  return (
    <div className="App">
      <div>I want to update this after iterating over the map:<b>{netIncome}</b></div>
      {sampleMap.map((value, key) => {
        netIncome += value.income;
        //setTotal(netIncome);
        return (
          <div key={key}>
            {value.name}
            {" - "}
            {value.income}
          </div>
        );
      })}
      <div>net income:{netIncome}</div>
    </div>
  );
};

I want to calculate the total income and propagate it elsewhere. If I use a state hook inside the map, I receive the following error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

How can I make this happen?

解决方案

I'd calculate the value in standalone statements before returning the JSX:

const App = () => {
  const [sampleMap, setSampleMap] = React.useState([
    { id: 1, name: "John", income: 100 },
    { id: 2, name: "George", income: 200 }
  ]);

  const netIncome = sampleMap.reduce((a, b) => a + b.income, 0);
  return (
    <div className="App">
      <div>I want to update this after iterating over the map:<b>{netIncome}</b></div>
      {sampleMap.map((value, key) => (
          <div key={key}>
            {value.name}
            {" - "}
            {value.income}
          </div> 
      ))}
      <div>net income:{netIncome}</div>
    </div>
  );
};
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

这篇关于更新地图内的状态挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！