父级的文本字段默认值未在子项上呈现

Question

我正在使用Reactjs处理一个表单，该表单从父组件中获取一些defaultValues。

问题是，父组件使用 axios post 设置值的状态，并将这些值作为 props 传递给子组件。我可以使用控制台在子组件上打印这些值.log但是如果我尝试将这些值放在 TextFields 上的 defaultValues 上，我得到了一个空表单，则表单上不会呈现任何值。

父组件：

export default class Parent extends Component {
constructor(props){
super(props);
this.state={
somevalue: '',
}
}
componentDidMount(){
this.getData();
}
getData = async () => {
await api.post('/getValue')
.then((res) => {
this.setState({
someValue: res.data;
})
}).catch((err) => {
console.log("Error: ", err);
})
}
render(){
return(
<Child value={this.state.someValue}/>
)}
}

子组件

export default function Child(props) {
console.log(props.value); // THIS LOG PRINT THE VALUE PROPERLY
return(
<TextField defaultValue={props.value}/>
)
}

这基本上是我的代码结构，但它不起作用。在此之后，文本字段仍然为空。

Answer 1

属性defaultValue仅用于初始呈现。如果您检查代码，您将看到在控制台之前.log输出它将首先输出的值undefined。您可以通过将defaultValue更改为value来将其更改为受控组件。这样将显示值，但需要为值的更改添加一个 onChange 处理程序。

function Child(props) {
// Using the value prop your value will display, but you will also have to pass an onChange handler to update the state in the parent
return <TextField value={props.value} />;
}

或者，您可以等到该值可用后再渲染组件

const { someValue } = this.state;
if (!someValue) {
return "loading the data";
}
return <Child value={someValue} />;

这取决于具体情况，哪种解决方案会更好。但我认为您可能希望更新输入中的值并对其进行处理，因此我会选择第一种情况。