Реагируйте с Semantic TextArea не обновляя значение при обновлении реквизита

Question

У меня есть этот класс, который представляет собой конкретную запись в списке.
Я пытаюсь использовать 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;

РЕШЕНИЕ: реальная проблема заключалась в том, что мой объект данных имел значения data [language], которые в итоге оказались неопределенными.Я ожидал, что он примет нулевое значение и вернется к заполнителю, но, очевидно, когда вы передаете значение NULL для поля значения textArea, у которого есть значение, оно ничего не делает, как показано в 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;