我如何通过道具数据更新反应子标签状态？

Question

大家好，我正在使用标签输入进行 React 项目。所以我添加了它 suucessfully.this 与 add tagg 和 add product 组件一起工作正常。但是当我编辑它时，它正在创建 problem.so 请告诉我如何更新子标签状态数据的数据？当我使用像 this.state={tags:this.props.data} 这样的道具时这是抛出空白圆顶的错误。

//prents component
   <TagsInputEdit  setStateOfTags={this.setStateOfTags} data={this.state.tags}/>

//child component
import React, { Component } from "react";
import suggestdata from "./tagsData";
import"./style.css"

class TagsInputEdit extends Component {
     state={
          tags:[],
          input: "",
          suggestions: []
          }
   handleChange = e => {
    const { value } = e.target;
    this.setState({
      input: value
    });
    this.handleSuggestion();
  };

  handleKeyDown = e => {
    if (e.keyCode === 9) {
      e.preventDefault();
    }
    const { tags, input, suggestions } = this.state;
    const text = suggestions.length ? suggestions[0].text : input;
    if ([9, 13].includes(e.keyCode) && text) {
      this.setState({
        tags: [...tags, text],
        input: ""
      });
    }
  };

  handleSuggestion = () => {
    const { input, tags } = this.state;
    const suggestFilterInput = suggestdata.filter(suggest =>
      suggest.text.toLowerCase().includes(input.toLowerCase())
    );

    const suggestFilterTags = suggestFilterInput.filter(
      suggest => !tags.includes(suggest.text)
    );

    this.setState({
      suggestions: suggestFilterTags
    });
  };

  handleDelete = i => {
    const { tags } = this.state;
    const newTags = tags.filter((tag, j) => i !== j);
    this.setState({
      tags: newTags
    });
  };

  AddTags = async  (text) => {
    this.setState({
      tags: [...this.state.tags, text],
      input: ""
    });
    await this.props.setStateOfTags( [...this.state.tags, text])
  };

  render() {
    const { tags, input, suggestions } = this.state;
 
      //  this.state.tags.push(this.props.data)
       console.log(tags,"tagdata")
  
        // tags.push(this.props.data.)
    console.log(this.props.data)
    return (
      <div className="tags-content">
        {tags.map((tag, i) => (
          <div key={i} className="tag">
            {tag}
            <div className="remove-tag" onClick={() => this.handleDelete(i)}>
              ×
            </div>
          </div>
        ))}
        <div className="tags-input">
          <input
            type="text"
            value={input}
            onChange={this.handleChange}
            onKeyDown={this.handleKeyDown}
            placeholder="add new tag"
          />
          {input && Boolean(suggestions.length) && (
            <div className="tags-suggestions">
              {suggestions.map(suggest => (
                <div
                  className="suggestion-item"
                  onClick={() => this.AddTags(suggest.text)}
                >
                  {suggest.text}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }
}

Answer 1

我认为你应该这样尝试 {this?.props?.data} 因为它可以让你执行代码而不会出错，而且这 return undefined(如果道具没有收到）在这种情况下你可以追踪到为什么这一切会发生

我如何通过道具数据更新反应子标签状态？

how can i update react child tags state by props data?

reactjs

react-native