Question

我所能找到的一切尝试似乎都不奏效。我真的很好奇如何使用react访问和编辑位于该状态的孙对象。如果有人可以告诉我我在做什么错，那将非常有帮助。

看看下面的代码...

App.js

行：41-58

getHomeworld = URL => {
  fetch(URL)
    .then(res => {
      return res.json();
    })
    .then(homeWorldObject => {
      console.log(homeWorldObject);
      // this.setState({ <- Why isn't this working????
      //   ...this.state.starwarsChars,
      //   ...this.state.nextPage,
      //   ...this.state.prevPage,
      //   ...this.state.starwarsChars.homeworld = homeWorldObject
      // });
    })
    .catch(err => {
      throw new Error(err);
    });
};

行：86-89

<CharacterList
  characters={this.state.starwarsChars}
  getHomeworld={this.getHomeworld}
/>

CharacterList.js

行：8-12

<Character
  key={character.name}
  characterDetails={character}
  getHomeworld={props.getHomeworld}
/>

Character.js

行：18-29

{Object.keys(props.characterDetails).includes("homeworld") ? (
  <div className="character-homeworld">
    <Homeworld
      homeworld={props.getHomeworld(props.characterDetails.homeworld)}
    />
  </div>
) : (
  <div className="character-homeworld">
    <h4>Homeworld</h4>
    <p>None</p>
  </div>
)}

Homeworld.js

行：7-10

<div className="homeworld-details">
  <p>Name: {props.name}</p>
  <p>Rotation Period: {props.rotation_period}</p>
</div>

预期输出：如果您查看沙盒网页，则“名称”和“轮换期限”（在“家庭世界”下）应显示以下位置的值：https://swapi.co/api/planets/1/

有没有人可以帮助我解决这个问题？

编辑：

我真的很接近进行这些更改（使用本地计算机，沙盒上的代码仍然是原始代码）...

App.js

let temp = {...this.state.starwarsChars} // use spread operator to clone it, so you don't mutate state on next line;
for (let character in temp) {
  if (temp[character].homeworld === URL) {
    temp[character].homeworld = homeWorldObject;
  }
}
// console.log(temp);
this.setState({
  starwarsChars: temp
});

Character.js

const Character = props => {
  props.getHomeworld(props.characterDetails.homeworld);
  console.log(props.characterDetails); // returns object{homeworld: {object}}
  console.log(props.characterDetails.homeworld); // returns url

和...

<div className="character-homeworld">
  <Homeworld
    homeworld={props.characterDetails.homeworld}/>
</div>

但是，现在的问题是如果我执行console.log(props.characterDetails.homeworld);，它将记录homeworld: url

和...

如果我做console.log(props.characterDetails);，它将字符对象的属性记录为homeworld: {object}

...

我想要的是第二个，我不确定为什么它不一致。

更新

出于某种奇怪的原因，codesandbox是控制台记录两个URL的控制台，而当我使用yarn start运行时，它将记录一个URL以及另一个对象的URL。因此，我在这里添加github链接-> https://github.com/jamespagedev/Sprint-Challenge-React-Wars（这样就可以正确地重现错误）

编辑2：

我将沙盒代码更改为以下代码，因此我们现在只担心1个文件中的代码-> https://codesandbox.io/s/0mo32q85pp

这是我现在看到的问题，我不确定如何解决...

getHomeworld = URL => {
  let home;
  fetch(URL)
  .then(res => res.json())
  .then(homeWorldObject => {
    home = homeWorldObject;
    console.log(home); // home is an object
  });
  console.log(home); // why is home undefined?
  return home;
};

我尝试做return homeWorldObject，但是主函数只是返回未定义。完成控制台日志记录后，这就是我发现的内容，我不确定为什么会发生这种情况...

使用setState更改孙对象的值

0 个答案: