如何使用 foreach 填充钩子

如何解决如何使用 foreach 填充钩子

我需要使用 foreach 语句填充钩子。使用我的代码，我只能从 Data 对象分配最后一个值。请帮助我创建正确的方法来使用数据中的“值”来填充钩子。我只需要 Percent={123,456,789} 而不是 {789}。

<pre><code>
function App() {
  const [Percentage,SetPercentage]=useState([]);
  const Data=[
    {sensor: 'abcd',value: 123},{sensor: 'efgh',value: 456},{sensor: 'ijkl',value: 789}
  ]
  const Show=()=>
  {
      Data.forEach((key)=>{
      SetPercentage([...Percentage,key.value]);
    })}
  return (
    &lt;View style={styles.app}>
      <Button onPress={Show} title='Show'></Button>
      {Percentage.map(()=>{
        return(
             &lt;View>
             &lt;Text>map={Percentage}&lt;/Text> 
          &lt;/View>
      )})}
    &lt;/View>
  );
}
</code></pre>

解决方法

您可以使用地图方法来做到这一点

SetPercentage(data.map(entry=>entry.value))

这将用 123,456,789 填充百分比

,

通过在如下循环中更新状态，您将获得不正确的结果和性能问题：

  const Show=()=>
  {
      Data.forEach((key)=>{
      SetPercentage([...Percentage,key.value]); 
    })}

避免这样的突变，而是建立你的价值并设置一次状态：

const show = () => {
    const vals = data.map((item) => item.value);
    setPercentage(vals); 

    // or
    setPercentage(data.map((item) => item.value));
  };

当您只是展示一个演示时，最好将 data 移到组件之外，并确保您的地图中有一个 unique key——理想情况下不是索引迭代器，而是一些独特的东西.

const data = [
  { sensor: "abcd",value: 123 },{ sensor: "efgh",value: 456 },{ sensor: "ijkl",value: 789 }
];

export default function App() {
  const [percentage,setPercentage] = useState<Array<number>>([]);

  const show = () => {
    // set state once
    const vals = data.map((item) => item.value);
    setPercentage(vals);

    // or
    setPercentage(data.map((item) => item.value));
  };

  return (
    <>
      <button onClick={show}>Show</button>
      {percentage &&
        percentage.map((item,index) => <div key={index}>{item}</div>)}
    </>
  );
}

Codesandbox Demo