Question

我创建了一个名为“CommonStyleGenerator”的组件，用于生成具有高度、宽度和 bgColor 等键的简单样式对象。我在组件中创建了一个文本字段，每当任何文本字段中的文本更改时，我都会使用更改的字段键调用 onStyleChange 并将更改的值存储在父组件中。

这是CommonStyleGenerator.js 组件代码：

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const CommonStyleGenerator = ({ style = {
  height: "100%",
  width: "100%",
  bgColor: "#ffffff"
}, onStyleChange }) => {

  useEffect(() => {
    onStyleChange("height", "100%");
    onStyleChange("width", "100%");
    onStyleChange("bgColor", "#ffffff"); //Only this getting effect.
  }, []);
  
  return (
    <View>
      <TextInput 
        value={style?.height}
        placeholder="height"
        onChangeText={(text) => onStyleChange("height", text)}
        style={styles.textField}
      />
      <TextInput 
        value={style?.width}
        placeholder="width"
        onChangeText={(text) => onStyleChange("width", text)}
        style={styles.textField}
      />
      <TextInput 
        value={style?.bgColor}
        placeholder="background color"
        onChangeText={(text) => onStyleChange("bgColor", text)}
        style={styles.textField}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  textField: {
    borderWidth: 1,
    marginVertical: 10
  }
})

export default CommonStyleGenerator;

这是我如何在我的 App.js 中调用组件的代码：

import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import CommonStyleGenerator from './components/CommonStyleGenerator';

const App = () => {
  const [commonStyle, setCommonStyle] = useState(null);
  return (
    <View style={{flex: 1, alignItems: 'center', padding: 20}}>
      <CommonStyleGenerator 
        style={commonStyle}
        onStyleChange={(key, value) => setCommonStyle({
          ...commonStyle,
          [key]: value
        })}
      />
      <Text>{JSON.stringify(commonStyle, null, 2)}</Text>
    </View>
  )
}

export default App;

现在，我想要的是在加载 CommonStyleGenerator 组件时，如果用户不更改任何文本字段，则生成默认样式。所以我在每个键的 useEffect 上调用了 onStyleChange 函数。但只有最后一个键（bgColor）函数被调用。

有人知道我如何解决这个问题吗？

snack.expo.io link

Answer 1

调用三个初始 commonStyle 时的 onStyleChange 状态为 null。每次调用它时，都会使用一个具有单个键的对象来设置新状态。在前一个 onStyleChange 之后同步调用 onStyleChange 尚未更新外部 commonStyle 变量。

你当前的代码就像在做：

onStyleChange({ height: '100%' });
onStyleChange({ width: '100%' });
onStyleChange({ bgColor: '#ffffff' });

所以只有最后一个传递的对象在下一次渲染时似乎处于状态。

在设置时改用回调：

    onStyleChange={(key, value) => setCommonStyle(commonStyle => ({
      ...commonStyle,
      [key]: value
    }))}

在 react useEffect

1 个答案: