在更新道具时，与语义TextArea无法更新值

Question

我这个类是列表中的特定条目。 我正在尝试使用语义-ui-react TextArea作为受控组件。 当外部事件（更改所选语言）触发componentWillReceiveProps方法时，状态中的数据对象将使用新数据进行更新。 但是，TextArea的渲染值（设置为this.state.value）永远不会更改。 我已经验证了状态实际上是新值，但我不明白为什么渲染值不会改变。

import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'

const UNAVAILABLE = "Translation unavailable."

class Key extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: props.data[props.language]
        }
    }

    componentWillReceiveProps = (props) => {
        this.setState({
            data: props.data[props.language]
        })
    }

    handleEdit = (event) => {
        this.setState({data: event.target.value})
        this.props.edit(event.target.value)
    }

    render = () => {
        let inverted = null;
        let color = null;
        if(this.props.hasChanged()){
            inverted = true;
            color = 'green'
        } else if(!this.props.data[this.props.language]) {
            inverted = true;
            color = 'red'
        }

        return(
            <Segment className='key' inverted={inverted} color={color}>
                <Grid columns='equal' textAlign='left'>
                    <Grid.Row>
                        <Grid.Column className='keyField' width={3}>
                            {this.props.name}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            {this.props.data.en}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            <Form>
                                <TextArea
                                    value={this.state.data} 
                                    placeholder={UNAVAILABLE}
                                    onChange={this.handleEdit}>
                                </TextArea>
                            </Form>
                        </Grid.Column>
                        <Grid.Column>
                            <Button
                                className='button'
                                floated='right' 
                                icon='trash alternate' 
                                compact
                                onClick={this.props.delete}
                            />
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
        )
    }
}

export default Key;

解决方案：真正的问题是我的数据对象具有最终未定义的数据[语言]的值。我期望它取一个空值并返回占位符，但显然当你给textArea的value字段赋值时，它有一个值它什么都不做，如github.com/facebook/react/issues/所示2533。添加检查属性是否在数据对象中并使用空字符串来修复我的问题。

Answer 1

你可以验证它适合我

import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'

class AboutPage extends React.Component {
  constructor(){
    super();
    this.state={
      data:"initial data"
    }
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({data: 'new Data'})
    }, 5000)
  }
  render() {
    return (
      <div>
        <h1>About</h1>

        <Key data={this.state.data}/>
      </div>
    );
  }
}



const UNAVAILABLE = "Translation unavailable."

class Key extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: props.data
        }
    }

    componentWillReceiveProps = (props) => {
        this.setState({
            data: props.data
        })
    }

    handleEdit = (event) => {
        this.setState({data: event.target.value})
        // this.props.edit(event.target.value)
    }

    render = () => {
        let inverted = null;
        let color = null;
        if(true){
            inverted = true;
            color = 'green'
        } else if(!this.props.data[this.props.language]) {
            inverted = true;
            color = 'red'
        }

        return(
            <Segment className='key' inverted={inverted} color={color}>
                <Grid columns='equal' textAlign='left'>
                    <Grid.Row>
                        <Grid.Column className='keyField' width={3}>
                            {'name'}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            {'English'}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            <Form>
                                <TextArea
                                    value={this.state.data} 
                                    placeholder={UNAVAILABLE}
                                    onChange={this.handleEdit}>
                                </TextArea>
                            </Form>
                        </Grid.Column>
                        <Grid.Column>
                            <Button
                                className='button'
                                floated='right' 
                                icon='trash alternate' 
                                compact
                            />
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
        )
    }
}

export default AboutPage;