Reactjs 反应设置状态不'；提交输入表单后，请不要更新状态

我是React的新手，想开发简易应用程序-有一个输入字段，我想从中获取值和渲染列表。在文本字段中添加选项后，我想用新选项更新此列表。 setState函数不工作，我不知道如何连接输入提交和列表呈现。我的代码如下

WaterApp.js

    import React from 'react';
    import AddWater from './AddWater';
    import WaterElements from './WaterElements';

    export default class WaterApp extends React.Component {
        state = {
            quantities: ['aaaaa', 'bbbbb', 'ccccc']
        };

handleAddQuantity = (quantity) => {
    this.setState(() => ({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}
render() {
    return (
        <div>
            <WaterElements quantities={this.state.quantities} />
            <AddWater handleAddQuantity={this.handleAddQuantity} />
        </div>
    )
}
    }

从“React”导入React；
从“/AddWater”导入AddWater；
从“/WaterElements”导入WaterElements；
导出默认类WaterApp扩展React.Component{
状态={
数量：[“AAAA”、“bbbbb”、“ccccc”]
};
handleAddQuantity=（数量）=>{
此.setState（（）=>({
数量：['ddddd'，'eeeee']
}));
console.log（'works'）；
}
render（）{
返回(
)
}
}

AddWater.js

    import React from 'react';

    export default class AddWater extends React.Component {
        handleAddQuantity = (e) => {
            e.preventDefault();
            const quantity = e.target.elements.quantity.value;
            console.log(quantity);
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}
    }

从“React”导入React；
导出默认类AddWater扩展React.Component{
手动引线数量=（e）=>{
e、 预防默认值（）；
常量数量=e.target.elements.quantity.value；
控制台日志（数量）；
};
render（）{
返回(
)            
}
}

WaterElements.js

    import React from 'react';

    const WaterElements = (props) => (
<div>
    <p>Water Quantity:</p>
    {
        props.quantities.map((quantity) => 
            <p key={quantity}>{quantity}</p>
        )
    }
</div>
    );

    export default WaterElements;

从“React”导入React；
常量元素=（道具）=>(
水量：

{
道具.数量.地图（（数量）=>
{quantity}
)
}
);
导出默认元素；

---

我希望现在的列表是dddd，eeeee。

你从来没有打过

props.handledddquantity

export default class AddWater extends React.Component {
    handleAddQuantity = (e) => {
        e.preventDefault();
        const quantity = e.target.elements.quantity.value;
        props.handleAddQuantity(quantity)
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}

导出默认类AddWater.Component{
手动引线数量=（e）=>{
e、 预防默认值（）；
常量数量=e.target.elements.quantity.value；
手持道具数量（数量）
};
render（）{
返回(
)            
}

应该是

this.setState({
    quantities: ['ddddd', 'eeeee']
});

和之后的添加

this.setState({
    quantities: [...state.quantities, quantity]
});

---

要更新，请使用此格式

this.state({key:value});
not  this.state(()=>{key:value});

handleAddQuantity = (quantity) => {
    this.setState({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}

---

这样做没有错：

setState（（）=>（{prop:value}））

，您只是在使用

更新程序

版本而没有声明

prevState

arg谢谢，我将AddWater.js改为：

从“React”导入React；导出默认类AddWater扩展React.Component{handleddquantity=（e）=>{e.preventDefault（）；const quantity=e.target.elements.quantity.value；console.log（数量）；this.props.handleAddQuantity（数量）；}；render（）{return（Submit）}不欢迎。考虑接受答案关闭它。
this.state({key:value});
not  this.state(()=>{key:value});

handleAddQuantity = (quantity) => {
    this.setState({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}