Question

我创建了一个视图，其中从设备上的本地数据库加载了用户。单击Task Componnet后，它将更新并在Compoonent中显示一个对号（这是checked Prop负责的）。但是以某种方式将selected状态数组的第一次更新从所有值false =未选择更新为true之后，就不会重新呈现Page ...

任何人都看到我在《守则》中犯了一个错误。因为我尝试了很多，但似乎找不到。我仍然以某种方式仍然确定自己做了一个，因为根据Docs，当Value更改时，setSelected函数应该触发重新渲染！

Users.tsx（应用页面）

const Users: React.FC = () => {
...
return (<ScrollView style={styles.scrollview}>
            {contacts.length > 0 ? (
              contacts.map((c, index) => {
                return [
                  <Task
                    checked={selected[index]}
                    onSelect={(selected) => {
                      setSelected((preState) => {
                        preState[
                          index
                        ] = selected;
                        return [...preState];
                      });
                    }}
                    key={index}
                    name={
                      c.firstname +
                      " " +
                      c.lastname
                    }
                  />,
                  <Spacer
                    key={c.phone + c.email}
                    width="100%"
                    height={20}
                  />,
                ];
              })
            ) : (
              <Text style={styles.noContactsText}>
                No Customers created yet
              </Text>
            )}
          </ScrollView)
}

task.tsx（在Scrollview内部呈现的组件）

interface Props {
  name: string;
  onSelect(selected: boolean);
  checked: boolean;
}
const Task: React.FC<Props> = ({
  name,
  onSelect,
  checked: checkedProp,
}) => {
  const [checked, setChecked] = useState(false);
  useEffect(() => {
    setChecked(checkedProp);
  }, [checkedProp]);
  return (
    <TouchableWithoutFeedback
      onPress={() => {
        onSelect(!checked);
      }}
    >
      <Grid style={styles.root}>
        <Col size={10} style={styles.checkmark}>
          <View>
            {checked ? (
              <CheckmarkIcon />
            ) : undefined}
          </View>
        </Col>
        <Col size={90}>
          <Text style={styles.text}>{name}</Text>
        </Col>
      </Grid>
    </TouchableWithoutFeedback>
  );
};

除了未发生的重新渲染外，我没有其他异常。

Answer 1

答案是，反应导航根本不会导致对重新访问的路线进行更新。但这给了您useIsFocused()钩子，可以像这样与useEffect()结合使用：

const focused = useIsFocused();
//Gets called on each Visit of the Route/View
useEffect(()=>{...}, [focused]);

useState（）钩子不会导致组件的重新呈现，因此子级也不会更新

1 个答案: