在reactjs中删除重复项后如何从状态值和setstate创建数组

Question

React 新手，这是非常基本的表单提交，但我在这里要做的是根据从输入接收的值创建数组，然后使用数组创建数组，但在 setState 之前还删除数组中的任何重复项。

import React, { Component } from 'react';

class Chase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }
  handleSubmit = (e) => {
    e.preventDefault();
// Should I create array in the handlesubmit ?
  };

  handleChange = (e) => {
      e.preventDefault()
      let newspoo = e.target.value
      let createArr= newspoo.split(' ')
      let newVal = Array.from(new Set(createArr))
       this.setState({ newVal}, () =>{
        console.log(newVal)
    });
// this works in console but on display I cannot see any values in the UI
  };

  render() {

    const {value} = this.state
    return (
      <form onSubmit={this.handleSubmit}>
       <div>
       <label>
          Name:
          <input
            type='text'
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type='submit' value='Submit' />
       </div>
       <div>
       <label>
            Output : 
         {/* I am trying to print the new array here after submitting the form */}
        </label>
        <p>{value}</p>
       </div>
      </form>
    );
  }
}

export default Chase;

Answer 1

问题

您没有使用正确的密钥 value 更新您的状态，而是添加了一个新的状态变量 this.state.newVal。

解决方案

handleChange = (e) => {
  e.preventDefault()
  let newspoo = e.target.value
  let createArr= newspoo.split(' ')
  let newVal = Array.from(new Set(createArr))
  this.setState(
    { value: newVal }, // <-- use correct state key
    () => {
      console.log(newVal)
    },
  );
};