React动态形式的输入数组

Posted 2021-03-27

我仍然是新的反应，所以我可能不会解释得足够好，但我感谢您的帮助。

我正在为我从数据库中获取列表的项目创建一个订单页面，如下所示。 **物品比这长得多。

enter image description here

我的问题是我在表单输入中设置值时遇到问题。我认为因为这个原因我没有设置初始状态..当我写下如下值时：我得到value =“[object object]”。

enter image description here

            <input 
                type="number" 
                className="form-control"
                name={itemID}
                id={itemID}
                value={this.state.posts }
                onChange={this.handleChange} 
            />

我需要将初始状态设置为Database中每个项的数组。

state = {posts: [{post:""}]}

这是我的代码：src / components / ItemForm

            import React from "react";
            import { connect } from "react-redux";
            import { fetchAllPosts } from '../actions/index';

            class OrderSauceForm extends React.Component {
            componentDidMount() {
                this.props.dispatch(fetchAllPosts());
            }

            state = {posts: []}

            handleChange = (e) => {
                this.setState({ [e.target.name]: e.target.value })
            }
            handleSubmit = (e) => {
                e.preventDefault() 
            console.log(this.state);
            }


            render() {
                const { posts } = this.props;
                //console.log(posts.data);
                if(!posts.data){
                    return( <h2>Something went wrong.</h2>);
                }
                return (
                    <div >
                    <form onSubmit={this.handleSubmit}  >
                            <table className="table">
                                <thead>
                                    <tr>
                                        <th><strong>Item Name</strong></th>
                                        <th><strong>Quantity</strong></th>  
                                    </tr>
                                </thead>
                                <tbody>
                                {
                                    posts.data.map((post,idx) => {
                                        let itemID = `item-${post.id}`
                                    return (
                                        <tr key={post.id}>
                                    <td>{post.name}</td>
                                    <td>
                                        <input 
                                        type="number" 
                                        className="form-control"
                                        name={itemID}
                                        id={itemID}
                                        value={this.state.posts}
                                        onChange={this.handleChange} 
                                        className="item"
                                        />
                                    </td>
                                    </tr>
                                    )
                                    })
                                }
                                </tbody>
                                </table>
                                <div className="form-group">
                                    <button>submit</button>
                                </div>
                        </form>   
                    </div>
                );
            }
            }

            const mapStateToProps = (state) => {
            return {
                    posts: state.posts
                };
            };

            export default connect(mapStateToProps)(OrderSauceForm);

答案

如果this.state.posts是你的初始值，那么尝试这样的事情

value={this.state.posts[idx].someValue}