Reactjs 如何设置变量函数的状态

我有一个组件（Father.js），它有两个使用state的变量：

const [streetAddress1, setstreetAddress1] = useState();
const [streetAddress2, setstreetAddress2] = useState();

还有一个这样声明的函数：

const setValues = (value, name) => {
    if(name === 'streetAddress1'){
        setStreetAddress1(value);
    }
    else if(name === 'streetAddress2'){
        setStreetAddress2(value);
    }
}

<Child objectNr="1" setValues={setValues} />
<Child objectNr="2" setValues={setValues} />

<input
    type="text"
    onBlur={ (e) => setValues(e.target.value, `streetAddress${objectNr}`)} />

然后我有一个子组件，它被称为：

const setValues = (value, name) => {
    if(name === 'streetAddress1'){
        setStreetAddress1(value);
    }
    else if(name === 'streetAddress2'){
        setStreetAddress2(value);
    }
}

<Child objectNr="1" setValues={setValues} />
<Child objectNr="2" setValues={setValues} />

<input
    type="text"
    onBlur={ (e) => setValues(e.target.value, `streetAddress${objectNr}`)} />

子组件具有用于设置地址的模糊输入字段。我是这样编码的：

const setValues = (value, name) => {
    if(name === 'streetAddress1'){
        setStreetAddress1(value);
    }
    else if(name === 'streetAddress2'){
        setStreetAddress2(value);
    }
}

<Child objectNr="1" setValues={setValues} />
<Child objectNr="2" setValues={setValues} />

<input
    type="text"
    onBlur={ (e) => setValues(e.target.value, `streetAddress${objectNr}`)} />

setValues（e.target.value，`streetAddress${objectNr}`）}/>

---

这很有效。但是，由于有许多类似的变量使用state，我想知道是否可以在函数setValue中根据传入的字符串运行set方法。因此，当第一个子元素发送字符串“streetAddress1”时，我希望函数setValue只运行该变量的set方法，而不需要运行大量if语句。这可能吗？

听起来您可能想使用状态为的对象或数组：

const [streetAddresses, setStreetAddresses] = useState({});

或者，您可以将索引和/或状态组合逻辑放在父级中，只要您的设置更干净：

// in father.js:
const makeSetAddress = objectNr => e => {
  setStreetAddresses({
    ...streetAddresses,
    [objectNr]: e.target.value
  });
};
// and pass it down:
<Child objectNr="2" setAddress={makeSetAddress(2)} />
// might be able to omit objectNr above
// if it isn't being used anywhere else but the state setter