从子组件传递函数后，将传递到该函数的值将以数字而不是对象返回

Question

因此，我正在编写一个简单的程序，该程序从抽屉中取下选择，然后将其显示为配方的一部分，但是当来自父的函数称为"更新值"父是一个数字而不是对象。我不确定我在做什么错，并且真的很感谢您的帮助。

父母：

import React, {Component} from 'react';
import {listOfOils} from "./Constants/OilList";
import OilDrawer from "./Components/OilDrawer";
import OilMixCard from "./Components/OilMixCard";
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            recipe: [],
            recipeName: ''
        }
    }
    addOilToRecipe = (oil) => {
        this.setState(() => {
                return {recipe: this.state.recipe.push(oil)}
            }
        )
    }
    setRecipeName = (name) => {
        this.setState(() => {
            return {recipeName: name}
        })
    }
    render() {
        return (
            <div className="App">
                <OilDrawer
                    addOil={this.addOilToRecipe}
                    oils={listOfOils}
                />
                {
                    console.log(JSON.stringify(this.state.recipe))
                }
                {/*The value for recipe when printed in the OilMixCard in the console is 1*/}
                <OilMixCard
                    recipe={this.state.recipe}
                    updateName={this.setRecipeName}
                />
            </div>
        );
    }
}
export default App;

儿童：

import Divider from '@material-ui/core/Divider'
import Avatar from "@material-ui/core/Avatar";
import ListItem from "@material-ui/core/ListItem";
import List from "@material-ui/core/List";
import ListItemText from "@material-ui/core/ListItemText";
class OilDrawer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            openDrawer: true
        }
    }
    // handleDrawerClose = () => {
    //     this.setState({openDrawer: false})
    // }
    render() {
        return (
            <Drawer
                className="oil_drawer"
                variant='persistent'
                anchor='right'
                open={this.state.openDrawer}
            >
                {/*<IconButton onClick={this.handleDrawerClose}>*/}
                    {/*<ChevronRightIcon/>*/}
                {/*</IconButton>*/}
                <Divider/>
                <List>
                    {this.props.oils.map(oil =>
                        <ListItem
                            button
                            onClick={() => this.props.addOil(oil)}
                            key={oil.name}
                        >
                            <Avatar src={oil.image}/>
                            <ListItemText primary={oil.name}/>
                        </ListItem>
                    )}
                </List>
            </Drawer>
        )
    }
}
export default OilDrawer

另一个显示食谱的孩子：

import React from 'react'
import Paper from "@material-ui/core/Paper";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
class OilMixCard extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <Paper>
                <List>
                    {console.log(JSON.stringify(this.props.recipe))}
                    {
                        this.props.recipe.map(oil =>
                            <ListItem
                                button onClick={() => this.props.addOil(oil)}
                                key={oil.name}
                            >
                                <Avatar src={oil.image}/>
                                <ListItemText primary={oil.name}/>
                            </ListItem>
                        )
                    }
                </List>
            </Paper>
        )
    }
}
export default OilMixCard

Answer 1

数组上的push方法返回添加值，而不是最终数组。在您的addOilToRecipe方法中，它的字符串在参考oil中设置为 this.state.recipie，当您执行以下操作时：

this.setState({ recipe: this.state.recipe.push(oil) });

现在，当您在字符串上调用映射时，您将获得单个数字索引。

做这样的事情：

this.setState({ recipe: [...this.state.recipe, oil] });