Reactjs 每个人都不断接到电话

我正在努力学习react redux传奇；所以我正在构建一个简单的应用程序，它调用一个随机的用户配置文件api并显示它。基本上，当用户点击“下一个图像”按钮时，它应该进行REST调用并检索下一个图像。我能够进行API调用并显示信息，但它不断无限地调用API，数据不断变化，尽管没有点击任何东西。这是我的密码：

App.js（父组件）

以下是我的传奇故事：

export function* fetchImage() {
  try {
    const response = yield call(fetch, 'https://randomuser.me/api/');
    const responseBody = yield response.json();
    console.log("QWERT", responseBody.results);
    yield put(setImage(responseBody.results[0]));
  } catch (e) {
    yield put(fetchFailed(e));
  }
  return;

}

export function* watchNextImage() {
  yield takeEvery(NEXT_IMAGE, fetchImage);
}

export default function* rootSaga() {
  yield all([
    fetchImage(),
    watchNextImage()
  ])
}

我怀疑这与我的手表在我的传奇故事中的作用有关。这就是在下一个图像操作上放置一个手表，然后在它发生时调用fetchImage。但是，我不明白如果我只发送一次下一个图像操作，为什么它会一直调用fetchImage

这是我的减速机和图像生成器-这里可能没什么有趣的：

reducer.js：

  const rootReducer = (state = {}, action) => {
          switch(action.type) {
              case NEXT_IMAGE: {
                  return Object.assign({}, state, action)
              }
              case "FETCH_FAILED": {
                  return state;
              }
              case "SET_IMAGE": {
                return Object.assign({}, state, action)
              }
              default: {
                  return state;
              }
          }
      };

      export default rootReducer;

ImageGenerator.js：

class ImageGenerator extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let user = this.props.user;
        console.log("USer", user);
        return (
            <div>
                Name: {user.name.first} {user.name.last} <br />
                Phone: {user.phone} <br />
                Date of Birth: {user.dob.date} <br/>
                Age: {user.dob.age} <br/>
                Email: {user.email} <br />
                Gender: {user.gender} <br/>
                City: {user.location.city } <br />
                State: {user.location.State } <br />
                Street: {user.location.street } <br />
                <img src={user.picture.medium} alt="No Image Found"/>
                <button onClick={NEXT_IMAGE}>New Image</button>
                <button>Add to Favorites</button> 
           </div>
        )
    }
}

export default ImageGenerator

类ImageGenerator扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
让user=this.props.user；
console.log（“用户”，USer）；
返回(
名称：{user.Name.first}{user.Name.last}

电话：{user.Phone}

出生日期：{user.dob.Date}

年龄：{user.dob.Age}

电子邮件：{user.Email}

性别：{user.Gender}

城市：{user.location.City}

状态：{user.location.State}

街道：{user.location.Street}

新形象
添加到收藏夹
)
}
}
导出默认图像生成器

将

rootSaga

更改为仅

yield

watchNextImage

（saga）。您不需要

产生

获取图像

（副作用）

---

之后，您只需在组件中正确连接操作。

我不知道如何调用

getNewImage

。它没有连接到任何

onClick

s？嗯，实际上是你的权利。从未调用getNewImage。我将日志放在mapDispatchToProps函数中，但没有放在getNewImage函数中。但这让我更加困惑。如果它甚至不发送下一个_IMAGE操作，那么是什么告诉它重复获取下一个映像？不过，谢谢，根本的问题是，在我的reducer中，我返回了整个action对象，而我本应只返回action.data。无论如何，我会把你的答案标记为正确答案，因为它至少解决了我的一个问题

  const rootReducer = (state = {}, action) => {
          switch(action.type) {
              case NEXT_IMAGE: {
                  return Object.assign({}, state, action)
              }
              case "FETCH_FAILED": {
                  return state;
              }
              case "SET_IMAGE": {
                return Object.assign({}, state, action)
              }
              default: {
                  return state;
              }
          }
      };

      export default rootReducer;

class ImageGenerator extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let user = this.props.user;
        console.log("USer", user);
        return (
            <div>
                Name: {user.name.first} {user.name.last} <br />
                Phone: {user.phone} <br />
                Date of Birth: {user.dob.date} <br/>
                Age: {user.dob.age} <br/>
                Email: {user.email} <br />
                Gender: {user.gender} <br/>
                City: {user.location.city } <br />
                State: {user.location.State } <br />
                Street: {user.location.street } <br />
                <img src={user.picture.medium} alt="No Image Found"/>
                <button onClick={NEXT_IMAGE}>New Image</button>
                <button>Add to Favorites</button> 
           </div>
        )
    }
}

export default ImageGenerator

export default function* rootSaga() {
  yield all([
    spawn(watchNextImage)
  ])
}