在道具更新时与语义文本区域反应不更新值

Question

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

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;

解决方案：真正的问题是我的数据对象具有最终未定义的数据[语言]值。我原以为它会取一个空值并返回到占位符，但显然当您将 null 赋给具有值的 textArea 的值字段时它什么都不做，如 github.[=19= 所示].添加检查属性是否在数据对象中并使用空字符串来解决我的问题。

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;

在道具更新时与语义文本区域反应不更新值

React with Semantic TextArea not updating value when props updated

textarea

reactjs

semantic-ui-react