Question

我正在尝试将我的物品包含在一个数组中，但是它会继续为在数组中推送的每个物品创建一个新的数组。这使得不可能遍历数组中的项

当然我提到了这一点，而我的部分正确了

工作演示

App.js

import React, {Component} from 'react';
import Navbar from './components/Navbar';
import {withStyles} from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import {Typography, Button} from '@material-ui/core';
import Footer from './components/Footer';
import Emoji from './components/Emoji';
import TextField from '@material-ui/core/TextField';
import EmojiPicker from 'emoji-picker-react';
import JSEMOJI from 'emoji-js';
import Icon from '@material-ui/core/Icon';
let jsemoji = new JSEMOJI();
// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';
// some more settings...
jsemoji.supports_css = false;
jsemoji.allow_native = true;
jsemoji.replace_mode = 'unified'
const styles = theme => ({
    shadows: ["none"],
    spacing: 8,
    root: {
        flexGrow: 1,
        minHeight: '800px',
        width: '100%',
        position: 'relative'
    },
    paper: {
        padding: theme.spacing.unit * 2,
        textAlign: 'left',
        width: '500px',
        color: theme.palette.text.secondary
    },
    textField: {
        width: '400px'
    },
    myitem: {
        margin: '40px'
    },
    emoji: {
        margin: '40px'
    },
    emojiButton: {
        margin: '20px 0px'
    },
    myitemList:{
        margin:'20px 0px'
    },
    notFound: {
        margin:'20px 0px'
    },
    cancel: {
        margin: '20px 0px'
    }
});
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emoji: '',
            text: '',
            items: [],
            emojiToggle: false
        }
    }
    onChange = (e) => {
        e.preventDefault()
        this.setState({text: e.target.value});
    }
    handleClick = (n, e) => {
        let emoji = jsemoji.replace_colons(`:${e.name}:`);

        this.setState({
            text: this.state.text + emoji,
        });
        // console.log(this.state.items)
    }
    handleButton = (e) => {
        e.preventDefault();
        if(!this.state.emojiToggle){
          this.setState({emojiToggle: true})
        }
        else{
          this.setState({emojiToggle: false})

        }

    }

    onSubmit = () => {

        let myArray = []

        myArray.push(this.state.text)
        this.setState({
            text: this.state.text,
            items: [...myArray]


      }, () => console.log(this.state.items));

    }


    render() {
        const {classes} = this.props;
        return (
            <div className={classes.root}>
                <Navbar/>
                <Grid container spacing={12}>
                    <Grid item sm={6} className={classes.myitem}>
                        <Paper className={classes.paper}>
                            <Typography variant="h2" component="h2">
                                Insert An Emoji
                            </Typography>
                          {/* Begin Form */}
                          <form>
                            <TextField
                                id="standard-name"
                                label="Enter Something"
                                className={classes.textField}
                                value={this.state.text}
                                onChange={this.onChange}
                                margin="normal"
                              />
                              {this.state.emojiToggle ? (
                                    <div>
                                        <EmojiPicker onEmojiClick={this.handleClick}/>
                                        <Button
                                            className={classes.cancel}
                                            onClick={this.handleButton}
                                            color="danger"
                                            variant="outlined">
                                            Close
                                        </Button>
                                    </div>
                                )
                                : (
                                    <div>
                                        <Button onClick={this.handleButton} color="primary" variant="outlined">
                                            Show Emojis
                                        </Button>

                                        <Button onClick={this.onSubmit} style={{ marginLeft: '10px'}} color="primary" variant="outlined">
                                            Submit
                                        </Button>


                                    </div>
                                )}
                              {/* End  Form */}
                            </form>
                        </Paper>
                    </Grid>


                    <Grid item sm={4} className={classes.myitem}>
                        <Typography variant="h2" component="h2">
                            Output
                        </Typography>


                    {this.state.items.length > 0 ? (
                        this.state.items.map( (item, i) => (

                            <div key={i}>
                                <Grid item sm={8} className={classes.myitemList}>    
                                    <Paper >
                                        <Typography>

                                           {item}
                                        </Typography>
                                    </Paper>
                                </Grid>
                            </div>
                        ))
                    ) : (
                        <div>

                            <Grid item sm={6} className={classes.notFound}>
                                <Typography>
                                   No Items
                                </Typography>

                            </Grid>
                        </div>

                    )}
                     </Grid>
                </Grid>
                <Footer/>
            </div>
        );
    }
}
export default withStyles(styles)(App);

Answer 1

从此代码中替换onSubmit函数。

<nav>
  <a class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><img src="xxx.png" style="width:`enter code here`215px;height:141px;></a></a>
      </nav>

Answer 2

使用此方法更改onSubmit方法。

onSubmit = e => {
  e.preventDefault();
  this.setState(
    {
      text: this.state.text,
      items: [this.state.text]
    },
    () => console.log(this.state.items)
  );
};

查看您的工作演示链接 onSubmit函数是正确的。

Answer 3

由于要列出所有表情符号项目，因此请将 OnSubmit 更改为以下内容：

  onSubmit = () => {
    const {
      state: { text, items = [] }
    } = this;
    const itemList = [...items];
    itemList.push(text);

    this.setState(
      {
        text: text,
        items: itemList
      },
      () => console.log(this.state.items)
    );
  };

这将更新items数组，而不创建新的数组。

React没有在数组中推送项目

3 个答案: