对于我的React-Select集成,我具有以下代码,并且需要在第一次渲染之前将b
字段设置一次。
selectedOption
还有一些控制台输出
import React from 'react';
import Select from 'react-select';
interface IOption{
value:string,
label:string
}
interface Props{
data : IOption[],
onSelected : (id:string) => void
}
export default class ReactSelect extends React.Component<Props> {
constructor(props){
super(props)
console.log("data from constructor : ",this.props.data)
}
tempSelectedOption:IOption | undefined
state = {
selectedOption:this.tempSelectedOption,
};
componentWillMount(){
this.setState({ selectedOption : this.props.data[0]},()=>{console.log("component will mount meth:",this.state.selectedOption)})
console.log("data from componentWillMount : ", this.props.data)
}
componentDidMount(){
this.setState({ selectedOption : this.props.data[0]},()=>{console.log("component did mount meth:",this.state.selectedOption)})
console.log("data from componentDidMount : ", this.props.data)
}
handleChange = selectedOption => {
this.setState({ selectedOption });
this.props.onSelected(selectedOption.value)
console.log(`Option selected:`, selectedOption);
};
render() {
const{ selectedOption } = this.state;
console.log("props.data in render :",this.props.data)
return (
<Select
value = {selectedOption}
onChange = {this.handleChange}
options = {this.props.data}
/>
);
}
}
答案 0 :(得分:1)
Ciao,我不是打字稿爱好者,但我认为您的问题可能与如何将道具传递到ReactSelect
组件有关。
我做了这个(非常愚蠢)example,道具记录似乎起作用了:
在App
组件中:
...
<Child data={"ciao"} />
...
然后是Child
组件:
class Child extends React.Component<{}> {
constructor(props) {
super(props);
console.log("data from constructor : ",this.props.data)
}
componentDidMount() {
console.log("data from componentDidMount : ", this.props.data);
}
private handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const type: string = event.currentTarget.title;
this.setState(({ count }) => ({
count: type === "decrement" ? count - 1 : count + 1
}));
};
public render() {
console.log("props.data in render :", this.props.data);
return (
...
);
}
}
日志显示:
data from constructor : ciao
props.data in render : ciao
data from componentDidMount : ciao
答案 1 :(得分:1)
首先,我要感谢关注此问题的每个人。
我也评论了@GiovanniEsposito的回答,情况大致如下,
在父组件中包含一个sdk,问题是我想将data [0]呈现为默认值,但是props.data在bsf
1
之后加载。实际上,即使在第一次渲染函数调用之后,仍会返回sdk服务调用,因此,在更新props.data时,需要使用其他渲染方法。然后'0'
仅在componentWillMount
函数中可用,因此我不得不在componentDidMount
函数中处理问题。
我将props.data
修改为
render
结果,我解决了我的问题,但我有一个警告,目前看来这对我来说并不严重。如果我做错了什么,请警告我:)
render