Question

我在下面的代码（此处为沙盒 https://codesandbox.io/s/silly-rubin-9ghc5?fontsize=14&hidenavigation=1&theme=dark ）中遇到了问题，道具发生了变化，但不会相应地刷新组件。

我希望能够在父节点的某个状态内跟踪不同的投票/选项，因此我使用了一个数组，其中索引是我的选项的索引，值是投票数。< /p>

import { useEffect, useState } from "react";
import { Button, View } from "react-native";

import "./styles.css";

const myList = [
  {
    cid: 0,
    cTx: "Paris"
  },
  {
    cid: 1,
    cTx: "Lyon"
  },
  {
    cid: 2,
    cTx: "Marseille"
  },
  {
    cid: 3,
    cTx: "Valence"
  },
  {
    cid: 4,
    cTx: "Bordeaux"
  }
];

interface mTprop {
  myItemId: number;
  myItemTxt: string;
  myItemSt: number[];
  myItemClck: () => void;
}

const MyItem = (props: mTprop) => {
  const onBtPress = () => {
    props.myItemClck();
    console.log(props.myItemSt);
  };

  return (
    <View
      style={{
        flexDirection: "row"
      }}
    >
      <h3>{props.myItemTxt}</h3>
      <Button onPress={onBtPress} title="Learn More" />
      <h3>{props.myItemSt[props.myItemId]}</h3>
    </View>
  );
};

export default function App() {
  const [selectedOpt, setSelectedOpts] = useState(new Array(0));

  useEffect(() => {
    setSelectedOpts(new Array(myList.length).fill(0));
  }, []);

  const updateOptions = (ix: number) => {
    ++selectedOpt[ix];
    setSelectedOpts(selectedOpt);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {myList.map((itm, ix) => {
        return (
          <MyItem
            key={ix}
            myItemId={ix}
            myItemTxt={itm.cTx}
            myItemSt={selectedOpt}
            myItemClck={() => updateOptions(ix)}
          />
        );
      })}
    </div>
  );
}

预先感谢一百万！

如果需要更多信息，请告诉我

Answer 1

为了改变列表中的数据。你需要这样做

 const updateOptions = (ix: number) => {
    const newList = selectedOpt.map((m, i) => {
      if (i === ix) {
        return m + 1;
      }
      return m;
    });
    setSelectedOpts(newList);
  };

REACT NATIVE / 我的子组件不重新渲染，尽管道具改变

1 个答案: