當我使用 const onSubmit 提交表單時，我會獲取資料。如果提交表單沒問題，我想提取從我的 api 獲得的資料。所以我使用 setState 回應：我的資料，然后我想將此資料（回應）傳遞給組件 SingleLayout。
但它不起作用。我收到此錯誤：[錯誤：物件作為 React 子項無效（發現：物件帶有鍵 {ID、帖子標題、post_date、Prix、Surface、Ville、Category、featured_image、mandats_signes、date_de_signature_du_compromis}）。如果您打算渲染一組子項，請改用陣列。]
這里的代碼：
export default class QueryChild extends Component {
state = {
username: "",
password: "",
isLogged: null,
email: "",
reponse: '',
id: 4577
}
constructor(props) {
super(props);
this.render();
}
onSubmit = async() => {
const fetchValue = 'myAPI/suivi-dossier?' 'username=' this.state.username '&password=' this.state.password '&id=' this.state.id
try {
await fetch(fetchValue, {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
if(responseJson.success === true) {
// I want to extract this :
this.setState({ reponse: responseJson.message })
this.setState({ isLogged: true })
} else {
this.setState({reponse : responseJson.message });
console.log(this.state.reponse)
}
// this.setState({
// data: responseJson
// })
})
.catch((error) => {
console.error(error);
});
} catch (err) {
console.log(err)
}
}
render() {
if(this.state.isLogged === true) {
// when user is Logged, I want to pass this.state.reponse to my component SingleLayout
// but I get the error : [Error: Objects are not valid as a React child
// (found: object with keys {ID, Post Title, post_date, Prix, Surface, Ville,
// Category, featured_image, mandats_signes, date_de_signature_du_compromis}). If you
// meant to render a collection of children, use an array instead.]
const SingleComponent = this.state.reponse.map(message => <SingleLayout key={message.ID} table={message}/> )
return (
<SafeAreaView>
{SingleComponent}
</SafeAreaView>
);
} else {
return (
<View style={styles.container}>
<ScrollView>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Spacer taille={70} />
<View style={styles.content}>
<Image
style={styles.imgLogo}
source={require('../../logo.png')}
/>
<Text style={styles.logo}>Pour des raisons de sécurité, veuillez entrer vos Identifiants</Text>
<View style={styles.inputContainer}>
<Text style={styles.textBasique}>{this.state.reponse}</Text>
<TextInput
placeholder='Identifiant ou adresse email'
style={styles.input}
value={this.state.username}
onChangeText={val => this.setState({ username: val})}
/>
<TextInput
placeholder='Mot de passe'
style={styles.input}
value={this.state.password}
secureTextEntry= {true}
onChangeText={val => this.setState({ password: val})}
/>
<Spacer taille={10} />
<Button title='Se Connecter' onPress={this.onSubmit}/>
<Spacer taille={10} />
</View>
</View>
<Spacer taille={200} />
</ImageBackground>
</ScrollView>
</View>
)
}
}
}
謝謝你。
uj5u.com熱心網友回復：
來自服務器的回應是一個物件。由于“map”函式僅適用于陣列，因此，如果您想運行此代碼，您必須將“responseJson.message”包裝到陣列中。
if(responseJson.success === true) {
this.setState({ reponse: [responseJson.message] })
this.setState({ isLogged: true })
}
uj5u.com熱心網友回復：
這是因為您不能像陣列一樣映射物件。要得到你想要的，試試下面的代碼
const SingleComponent = Object.keys(this.state.reponse).map(key => <SingleLayout key={key} table={this.state.reponse[key]}/> )
這里Object.keys(this.state.reponse)將給出一個以回應物件的鍵作為值的陣列，并通過映射該鍵陣列，我們可以實作對應的值this.state.reponse[key]
uj5u.com熱心網友回復：
是的，我在應用解決方案后遇到了類似的錯誤，因為我發現錯誤來自 setState 回應。所以我添加了 JSON.stringify ，現在錯誤消失了。
單一布局的代碼：
const SingleLayout = (props) => {
let id = props.id
let table = props.table
console.log(table)
const { colors } = useTheme();
return (
<View style={[styles.container, {backgroundColor: colors.background}]}>
<Text>Bravo</Text>
</View>
)
}
現在有了解決方案： const SingleComponent = Object.keys(this.state.reponse).map(key => )
它有效，但它一個接一個地發送字符
uj5u.com熱心網友回復：
所以我終于解決了我的問題：
我更改的代碼：
QueryChild.tsx：
if(responseJson.success === true) {
//here :
this.setState({ reponse: JSON.stringify(responseJson.message) })
this.setState({ isLogged: true })
我像這樣直接回傳 SingleLayout ：
return (
<SafeAreaView>
<SingleLayout table={this.state.reponse} />
</SafeAreaView>
現在我可以訪問 this.state.reponse 到我的 SingleLayout ：
const SingleLayout = (props) => {
let id = props.id
let table = props.table
const myObj = JSON.parse(table);
console.log(myObj[0].mandats_signes)
console.log(myObj[0].ID)
console.log(myObj[0].Category)
//etc...
const { colors } = useTheme();
return (
<View style={[styles.container, {backgroundColor: colors.background}]}>
<Text>Bravo</Text>
</View>
)
}
uj5u.com熱心網友回復：
傳遞 JSON 然后決議不是一個好習慣。
我解決了它，這是我向您提供的相同解決方案的鏈接： https ://codesandbox.io/s/peaceful-bouman-qyi5y?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422637.html
標籤：