Javascript 每一次状态变化都会对复位作出反应？

我正在开发一个简单的crud表单，在react for Learning for Learning中使用formik，如下所示

现在，在这种形式下，我面临两个问题

Ist问题

由于Quantity字段应该只输入数字，所以我添加了一个onChange侦听器，如果只输入数字，则更新状态，它工作正常，但问题是它重置了整个表单

<Field
    className="form-control"
    type="text"
    name="quantity"
    onChange={this.onChangeCheckNumber}
>
</Field>

onChangeCheckNumber = (event) => {
    const re = /^[0-9\b]+$/;

    // if value is not blank, then test the regex

    if (event.target.value === '' || re.test(event.target.value)) {
        this.setState({ quantity: event.target.value })
    }
}

当我设置状态时，我想我的整个身体会重新呈现

如何完美地实现这一功能

第二期

仓库选择取决于城市选择，因此我在城市上添加了一个onChange，并为所选城市ID调用了仓库，我正在接收数据，但城市下拉列表被阻止

我的国家财产

state = {
        quantity: 0,
        price: "0",
        comments: '',
        itemType: {
            key: 0,
            value: 'Select'
        },
        cities: {
            key: 0,
            value: 'Select'
        },
        warehouses: {
            key: 0,
            value: 'Select'
        },
        sellers: {
            key: 0,
            value: 'Select'
        },
        warehouseOptions: null
    }

在componentDidMount中，我正在初始化下拉列表值

componentDidMount() {
        this.itemTypeObject();
        this.cityObject();
        this.sellerObj();
    }

使用axios从服务器获取数据并更新状态

cityObject = () => {
        axios.get('/cities')
            .then(response => {
                this.setState({
                    cities: response.data
                });
            }).catch(error => {
                console.log(error);
            });
    }

在我的Formik表单中标记我的城市和仓库下拉列表

<div>
        <label>City</label>
        <div>
            <Field
                as="select"
                onChange={this.onCityDropdownSelected}
                name="city"
            >
                {this.createCity()}
            </Field>
        </div>
</div>
<div>
    <label>Warehouse</label>
    <div>
        <Field
            className="form-control"
            as="select"
            name="warehouse"
        >
            {this.state.warehouseOptions}
        </Field>
    </div>
</div>

---

在此之后，我在warehouse下拉列表中获得更新的值，但city下拉列表打开，但在选择时不会更改。

在第一期中，您通过执行

this.setState（{quantity:event.target.value}）来更改整个状态

因为它将更改您的状态并清除所有其他状态值，最终状态将仅包含重置表单状态所产生的数量

要解决这个问题，你必须改变你的旧状态，而不仅仅是像这样改变数量：

this.setState{...state, quantity: event.target.value}

---

至于

onCityDropdownSelected

则出现了相同的问题。请告诉我这个答案是否有助于解决您的问题。

对于第一个问题，我认为您需要设置一个名为

value

的字段，该字段等于状态值，以便在组件和组件状态之间同步数据。我想我总是在不维护itI的情况下更新状态。我尝试了这个方法，onChangeCheckNumber=（event）=>{const re=/^[0-9\b]+$////如果值不是空的，那么如果（event.target.value==''|re.test（event.target.value））{this.setState（{…this.state，quantity:event.target.value}}仍然不走运，两个地方都很抱歉，那么就测试正则表达式

onCityDropdownSelected = (event) => {
        if (event.target.value !== "0") {
            this.warehouseObj(event.target.value);
        } else {
            this.setState({
                warehouseOptions: null
            })
        }
    }

warehouseObj = (cityId) => {
        axios.get(`/warehouses/cityId/${cityId}`)
            .then(response => {
                this.setState({
                    warehouses: response.data
                });
                this.createWarehouse();
            }).catch(error => {
                console.log(error);
            });
    }

this.setState{...state, quantity: event.target.value}