Relays QuereRenderer不会对突变进行重新渲染。据我所知，我的商店正在更新。可悲的是，Chrome的relay-devtools无法工作，所以我只能使用控制台检查商店，我觉得这很令人困惑。即使没有更新程序功能（下面添加），Relay似乎也会更新我的商店。我已经包含了一个链接到继电器商店的chrome dev工具的图片。
添加信息： 只更新国家/地区容器上的一些道具。查看器道具已更新，但没有国家/地区名称。片段支持国家没有更新。为什么？我需要使用重新获取容器吗？怎么样？
<QueryRenderer
environment={environment}
query={graphql`query CartContainerQuery {
viewer {
id
country {
...Country_country
}
}
}`}
variables={{}}
render={({error, props}) => {
if (error) {
console.log(error)
return <div>Error!</div>;
}
if (!props) {
return <div>Loading...</div>;
}
return (
<div>
<Login {...props}/>
<Country country={props.viewer.country} {...props}/>
//...viewer prop updates but without country name because of fragment
//country prop does not update. I don't understand why. Probably because it only updates with state change.
</div>
);
}}
/>
Country.js
class Country extends Component{
state = {
country: 'Germany',
}
handleInputChange = (event) => {
const target = event.target,
value = target.type ===
'checkbox' ? target.checked : target.value,
name = target.name
this.setState({
[name]: value
});
}
render() {
const { country } = this.state
const variables = {
country,
}
return (
<div className={styles.corpus}>
<div>
{this.props.country.map(countries => {
return <div key={countries.id}>{countries.name}</div>
})}
</div>
<form onSubmit={(e) => {
e.preventDefault();
CreateCountryMutation(
this.props.relay.environment,
{
country,
},
{
idCountry: this.props.viewer.id
},
(name) => console.log(name))
}}>
<input
name="country"
value={this.state.country}
onChange={this.handleInputChange}
type="text"
placeholder="Your country"
/>
<button type="submit">
Add Country
</button>
</form>
</div>
)
}
}
export default createFragmentContainer(
Country,
graphql`
fragment Country_country on CountryType @relay(plural: true) {
id
name
}
`
)
createCountryMutation.js：
const mutation = graphql`
mutation CreateCountryMutation($input: CreateCountryInput!) {
createCountry(input: $input) {
country {
name
}
}
}
`;
export default (environment, { country }, { idCountry }, callback) => {
const variables = {
input: { country }
};
commitMutation(
environment,
{
mutation,
variables,
updater: store => {
const mutation = store.getRootField('createCountry')
const mutationRecord = mutation.getLinkedRecord('country')
const storeById = store.get(idCountry)
const storeCountryRecord = storeById.getLinkedRecords('country') || []
const newRecords = [...storeCountryRecord, mutationRecord]
storeById.setLinkedRecords(newRecords, 'country')
// console.log(newPostCountry)
},
onCompleted: () => {
callback(country);
},
onError: err => console.error(err),
},
);
}
environment.js： const store = new Store（new RecordSource（））
const network = Network.create((operation, variables) => {
return fetch('/graphql', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: operation.text,
variables,
}),
}).then(response => {
return response.json()
})
})
const environment = new Environment({
network,
store,
});
export default environment;
在道具更改后，我需要做什么才能让QueryRenderer重新渲染？ QueryRenderer返回中的Console.log显示在变异后props会发生变化。
