javascript - props 在组件中更改为 undefined

Question

我的以下组件非常不稳定。
" this.state.list "从 获取值this.props .但是状态立即变为“ undefined ”。
就是想不通为什么？？？这段代码有什么问题。
this.state.dropList

["2 mg/dL  -   Feb 21 2021 12:11:00", "5 mg/dL  -  Feb 21 2021 01:11:00"]

<ListItem dropList={this.state.dropList} />.  //call the component


export default class ListItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
      }
    

     componentDidMount() {
        const {dropList} = this.props;
       this.setState({list: dropList})
    }


        render(){
            console.log("droplist inside:", this.state.list)
            return (
                <View>
            {
            this.state.list !== "" ?      
                <View>
                {      
                this.state.list.map((l,i) => (
                  <View key={l}>
                    <ListItem   
                    containerStyle={{padding: 4, backgroundColor:'#D3D3D3'}}
                    title={l}
                    accessible={true}
                    />
                    </View>
                ))             
              }
              </View>
              : null
           }
     </View>
            )
        }

}

日志

droplist inside: ["2 mg/dL  -   Feb 21 2021 12:11:00", "5 mg/dL  -  Feb 21 2021 01:11:00"]
droplist inside: undefined
droplist inside: undefined
droplist inside: undefined

Answer 1

看来您正在设置 list您所在州的属性引用 dropList .相反，您希望按 dropList 的值进行复制。 .
因为 dropList是一个原始类型的数组，那么你要做this.setState({list: [...dropList]})而不是 this.setState({list: dropList}) .如 dropList是另一种类型的集合或结构，您需要按照 in this answer 的说明进行深度克隆.
请尝试一下，如果有帮助，请告诉我:-)