Reactjs Can'；t直接改变状态，但使用setState会导致空错误

我正在构建React 16.13应用程序。我有这个组件

render() {
    const tags = this.props.values.map(result => (
        {
            id: result.name,
            text: result.name
        }));
    this.state = {
        tags: tags,
        suggestions: this.props.suggestions ? this.props.suggestions.map(result => ({
            id: result.name,
            text: result.name
        })) : []
    };

    return (
        <div className="form-group">
            <FormLabel>Coop Type(s)</FormLabel>
            <ReactTags tags={this.state.tags}
                suggestions={this.state.suggestions}
                handleDelete={this.handleDeletion}
                handleAddition={this.handleAddition}
                handleDrag={this.handleDrag}
                delimiters={delimiters} />
        </div>
    )
}

所以我试着按照建议改成“设置状态”

render() {
    const tags = this.props.values.map(result => (
        {
            id: result.name,
            text: result.name
        }));
    this.setState({
        tags: tags,
        suggestions: this.props.suggestions ? this.props.suggestions.map(result => ({
            id: result.name,
            text: result.name
        })) : []
    }); 

    return (
        <div className="form-group">
            <FormLabel>Coop Type(s)</FormLabel>
            <ReactTags tags={this.state.tags}
                suggestions={this.state.suggestions}
                handleDelete={this.handleDeletion}
                handleAddition={this.handleAddition}
                handleDrag={this.handleDrag}
                delimiters={delimiters} />
        </div>
    )
}

render（）{
const tags=this.props.values.map（结果=>(
{
id:result.name，
text:result.name
}));
这是我的国家({
标签：标签，
建议：this.props.suggestions？this.props.suggestions.map（结果=>({
id:result.name，
text:result.name
})) : []
}); 
返回(
合作社类型
)
}

但这会导致启动时出错

Line 52:9:  Do not mutate state directly. Use setState() 

  60 | return (
  61 |     <div className="form-group">
  62 |         <FormLabel>Coop Type(s)</FormLabel>
> 63 |         <ReactTags tags={this.state.tags}
     | ^
  64 |             suggestions={this.state.suggestions}
  65 |             handleDelete={this.handleDeletion}
  66 |             handleAddition={this.handleAddition}

60 |返回(
61 |     
62 |鸡笼式
>63 |如果要初始化构造函数，可以在构造函数中执行此操作。构造函数将出现在类级别。如果要更新stateon props，可以使用方法：
getDerivedStateFromProps
。您可以阅读此方法


您可以创建一个不同的方法getDerivedStateFromProps，它为您提供新的道具和组件存储的prevState。如果要将状态分配给更改的道具，您可以在其中看到。此函数返回更新的状态。下面是演示用例，您可以在其中比较道具进入和状态继续如果你的道具不同，你可以将道具分配给州政府

 static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.suggestions!== prevState.suggestions) {
            return {
                suggestions: nextProps.suggestions ? nextProps.suggestions.map(result => ({
            id: result.name,
            text: result.name
        })) : []
            };
        }
        return null;
    });

您不应该在
render
函数中调用
setState

render（）函数应该是纯函数，这意味着它不会修改
组件状态，每次调用时返回相同的结果，
而且它不直接与浏览器交互


在这种特殊情况下，您将使用
state.tags
，但
setState
尚未更新状态

如果您想根据道具设置状态，您可以直接在中设置，或者使用
是否尝试初始化状态或更新状态？如果您尝试初始化状态，只需将第一个示例移动到构造函数中。然后它不是变异，而是初始化，并且是可接受的。这两个“建议”prop由其父组件的AJAX调用填充，因此最初它是空的，但在AJAX调用完成后，它有一个数组。谢谢，但这不起作用。作为“建议”参数（prop）在传递到组件中时发生更改，组件无法准确反映其新值。理想情况下，您不应该将道具变异到组件中，这不是一个好的做法，但如果情况类似于道具因父项而发生更改，那么您可以使用我在回答中提到的getDerivedStateFromProps。此方法接受道具通过，您可以将这些道具分配给您所在的州。您可以浏览我为GetDerivedSateFromProps共享的链接。在您的回答中，我是否可以将“this.state=getDerivedStateFromProps（…”？我还想做“正确的”事情那么，像这样的事情最常见的用例是什么——子组件响应父组件中加载的新数据而更改？我已经分享了您可以为getDerivedStateFromProps编写的函数。作为一种常规做法，考虑到您的用例，您可以将您的props分配给组件的状态，并使用getDerivedStateFromProps来更新你的状态，在道具改变的情况下，你也可以直接考虑使用道具，即使没有分配状态，也就是使用“<代码>”。道具。建议直接渲染。希望这能回答你的疑问。如果你觉得答案有用，你可以投票或接受。谢谢：
 static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.suggestions!== prevState.suggestions) {
            return {
                suggestions: nextProps.suggestions ? nextProps.suggestions.map(result => ({
            id: result.name,
            text: result.name
        })) : []
            };
        }
        return null;
    });