如何获取fetch调用的值传递给我的组件并让组件重新渲染？

Question

我正试图构建一个React 16.13.0应用程序。 我创建了以下FormContainer，我试图在我的 "componentDidMount "方法中加载数据后，将一个值传递到一个道具变量（"sugges"）中......

class FormContainer extends Component {  
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY

  constructor(props) {
    super(props);

    this.state = {
      countries: [],
      provinces: [],
      errors: [],
      newCoop: {
        name: '',
        types: [{
          name: ''
        }],
        address: {
          formatted: '',
          locality: {
            name: '',
            postal_code: '',
            state: ''
          },
          country: FormContainer.DEFAULT_COUNTRY,
        },
        enabled: true,
        email: '',
        phone: '',
        web_site: '' 
      },

    }

...

  render() {
    return (
      <div>
        <form className="container-fluid" onSubmit={this.handleFormSubmit}>
            <FormGroup
                controlId="formBasicText">      

                <Input inputType={'text'}
                   title= {'Name'} 
                   name= {'name'}
                   value={this.state.newCoop.name} 
                   placeholder = {'Enter cooperative name'}
                   handleChange = {this.handleInput}
                   errors = {this.state.errors} 
                   /> {/* Name of the cooperative */}
 
                <CoopTypes 
                  name={'types'}
                  suggestions = {this.state.coopTypes} 
                  values = {this.state.newCoop.types}
                  placeholder = {'Enter coop type(s)'}
                  handleAddition = {this.handleCoopTypeAddition}
                  handleDeletion = {this.handleCoopTypeDeletion}
                  errors = {this.state.errors}
                /> {/* Coop Type Selection */}

        ...
  }

  componentDidMount() {
    let initialCountries = [];
    let initialProvinces = [];
    let coopTypes = [];
    ...
    // Get all possible coop types 
    fetch(FormContainer.REACT_APP_PROXY + '/coop_types/')
        .then(response => {
            return response.json();
        }).then(data => {
        coopTypes = data.map((coopType) => {
            return coopType
        });
        console.log("coop types:");
        console.log(coopTypes);
        this.setState({
            coopTypes: coopTypes,
        });
    });    
  }
}

下面是在表单中调用的组件定义......。

class CoopTypes extends React.Component {
    constructor(props) {
        super(props);

        console.log("sugestions:");
        console.log(props.suggestions); 
        const tags = props.values.map(result => (
            {
                id: result.id,
                text: result.name
            }));
        this.state = {
            tags: tags,
            suggestions: props.values.map(result => ({
                id: result.id,
                text: result.name
            }))
        };
        this.handleDelete = props.handleDelete;
        this.handleAddition = props.handleAddition;
        this.handleDrag = this.handleDrag.bind(this);
    }
 
    handleDelete(i) {
        const { tags } = this.state;
        this.setState({
         tags: tags.filter((tag, index) => index !== i),
        });
    }
 
    handleAddition(tag) {
        this.setState(state => ({ tags: [...state.tags, tag] }));
    }
 
    handleDrag(tag, currPos, newPos) {
        const tags = [...this.state.tags];
        const newTags = tags.slice();
 
        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);
 
        // re-render
        this.setState({ tags: newTags });
    }
 
    render() {
        const { tags, suggestions } = this.state;
        return (
            <div>
                <ReactTags tags={this.state.tags}
                    suggestions={this.state.suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition}
                    handleDrag={this.handleDrag}
                    delimiters={delimiters} />
            </div>
        )
    }
};

export default CoopTypes;

问题是在 "fetch "调用加载后，组件没有重新渲染。 也就是说，它总是以一个 "null "的值来渲染建议道具。 我需要做什么才能在 "fetch "调用加载后，将值传递给组件？

Answer 1

suggestions: props.values.map(result

1. 使用了错误的道具。
2. 更新后的道具（如果更新）不会反映到状态中（构造函数调用一次

您可以使用 props.suggestions (.map)直接在 render (使用局部变量)，而不需要在状态中 "缓冲"(并照顾道具更新)。使用功能组件可以更容易遵循【依赖关系】。

的提示。你可以将 console.log 在 render() 以确保它是用当前的建议道具渲染的（或不）。

---

这看起来有点奇怪。

    this.handleDelete = props.handleDelete;
    this.handleAddition = props.handleAddition;
    this.handleDrag = this.handleDrag.bind(this);

这看起来有点奇怪--你的类处理程序(handleDelete，'handleAddition'函数）是你的 this.handleDelete 和 this.handleAddition. 用props-handlers覆盖它们(在构造函数中)有一点[不？]意义。两个this-handlers都应该被绑定为 this.handleDrag 是。你可以使用this-handlers中的props-handlers（有条件地，如果定义了）。