如何在 reactjs 和 awsamplify 中执行多个查询
How to perform more than one query in reactjs and awsamplify
我正在尝试在 React.js 中查询 1 个以上的 Dynamo 数据库。我尝试在不同的 classes 中定义这两个组件并导入它们,但没有用,然后我尝试在相同的 class 中定义这两个组件,这给了我错误
TypeError: this.state.patients2 is undefined
这是我的组件
state = { patients2: [] }
async componentDidMount() {
try {
const apiData = await API.graphql(graphqlOperation(listPatients2))
const patients2 = apiData.data.listPatients2.items
this.setState({ patients2 })
} catch (err) {
console.log('qqqqqqqqqqqqqqqqqq ', err)
}
}
state = { beraters: [] }
async componentWillMount2() {
try {
const apiData = await API.graphql(graphqlOperation(listBeraters))
const beraters = apiData.data.listBeraters.items
this.setState({ beraters })
console.log(beraters)
} catch (err) {
console.log('qqqqqqqqqqqqqqqqq ', err
)
}
}
我在这里映射结果
<h1>Meine Daten</h1>
{
this.state.beraters.map((rest, i) => (
<div style={styles.item}>
<p style={styles.Vorname}>{rest.Vorname}</p>
<p style={styles.Nachname}>{rest.Nachname}</p>
<p style={styles.Strasse}>{rest.Strasse}</p>
<p style={styles.Hausnr}>{rest.Hausnr}</p>
<p style={styles.Ort}>{rest.Ort}</p>
<p style={styles.Postleitzahl}>{rest.Postleitzahl}</p>
<p style={styles.Telefonnummer}>{rest.Telefonnummer}</p>
</div>
))
}
</div>
<div >
{
this.state.patients2.map((rest, i) => (
<div style={styles.item}>
<l style={styles.Vorname}>{rest.Vorname}</l>
<l> </l>
<l style={styles.Nachname}>{rest.Nachname}</l>
</div>
))
}
</div>
非常感谢任何帮助。谢谢!
您的 patients2 未定义,因为您正在覆盖状态值。只需在状态中一起定义您的数组并同时调用您的查询。类似的东西:
state = {
beraters: [],
patients2: []
}
async componentDidMount() {
try {
const apiDataPatients = await API.graphql(graphqlOperation(listPatients2))
const apiDataBeraters = await API.graphql(graphqlOperation(listBeraters))
const patients2 = apiDataPatients.data.listPatients2.items
const beraters = apiDataBeraters.data.listBeraters.items
this.setState({ beraters, patients2 })
} catch (err) {
console.log('Error:', err)
}
}
我正在尝试在 React.js 中查询 1 个以上的 Dynamo 数据库。我尝试在不同的 classes 中定义这两个组件并导入它们,但没有用,然后我尝试在相同的 class 中定义这两个组件,这给了我错误
TypeError: this.state.patients2 is undefined
这是我的组件
state = { patients2: [] }
async componentDidMount() {
try {
const apiData = await API.graphql(graphqlOperation(listPatients2))
const patients2 = apiData.data.listPatients2.items
this.setState({ patients2 })
} catch (err) {
console.log('qqqqqqqqqqqqqqqqqq ', err)
}
}
state = { beraters: [] }
async componentWillMount2() {
try {
const apiData = await API.graphql(graphqlOperation(listBeraters))
const beraters = apiData.data.listBeraters.items
this.setState({ beraters })
console.log(beraters)
} catch (err) {
console.log('qqqqqqqqqqqqqqqqq ', err
)
}
}
我在这里映射结果
<h1>Meine Daten</h1>
{
this.state.beraters.map((rest, i) => (
<div style={styles.item}>
<p style={styles.Vorname}>{rest.Vorname}</p>
<p style={styles.Nachname}>{rest.Nachname}</p>
<p style={styles.Strasse}>{rest.Strasse}</p>
<p style={styles.Hausnr}>{rest.Hausnr}</p>
<p style={styles.Ort}>{rest.Ort}</p>
<p style={styles.Postleitzahl}>{rest.Postleitzahl}</p>
<p style={styles.Telefonnummer}>{rest.Telefonnummer}</p>
</div>
))
}
</div>
<div >
{
this.state.patients2.map((rest, i) => (
<div style={styles.item}>
<l style={styles.Vorname}>{rest.Vorname}</l>
<l> </l>
<l style={styles.Nachname}>{rest.Nachname}</l>
</div>
))
}
</div>
非常感谢任何帮助。谢谢!
您的 patients2 未定义,因为您正在覆盖状态值。只需在状态中一起定义您的数组并同时调用您的查询。类似的东西:
state = {
beraters: [],
patients2: []
}
async componentDidMount() {
try {
const apiDataPatients = await API.graphql(graphqlOperation(listPatients2))
const apiDataBeraters = await API.graphql(graphqlOperation(listBeraters))
const patients2 = apiDataPatients.data.listPatients2.items
const beraters = apiDataBeraters.data.listBeraters.items
this.setState({ beraters, patients2 })
} catch (err) {
console.log('Error:', err)
}
}